web-plus-ui
Version:
vue3+vite+ts+element-plus 组件库
2 lines (1 loc) • 7.24 kB
JavaScript
import{_ as m}from"./index.17927878.js";import{l as c,r as f,E as d,a as o,o as g,f as x,w as i,e as u,c as F,b as h,R as p}from"./vendor.184a8d03.js";const _={name:"Transfer",data(){const l=()=>{const t=[];for(let e=1;e<=15;e++)t.push({key:e,label:`Option ${e}`,disabled:e%4==0});return t},n=c([1]),a=c([1]),s=c(l());return{listQuery:f({TransferValue:{rightValue:n,leftValue:a}}),formItem:[{type:"es-transfer",label:"Transfer",key:"TransferValue",col:24,attrs:{placeholder:"\u9009\u62E9",filterable:!1,"left-default-checked":[2,3],"right-default-checked":[1],"render-content":(t,e)=>t("span",null,e.key," - ",e.label),titles:["\u5DE6\u4FA7\u6807\u9898","\u53F3\u4FA7\u6807\u9898"],"button-texts":["\u5411\u5DE6","\u5411\u53F3"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:s},listeners:{change:t=>{d({message:"\u53F3\u4FA7\u5185\u5BB9\u4E3A\uFF1A"+t,type:"success"})}},operationLeftName:"\u5DE6\u4FA7\u64CD\u4F5C",operationLeft:{click:t=>{d({message:"\u70B9\u51FB\u5DE6\u4FA7\u64CD\u4F5C\u6309\u94AE",type:"success"})}},operationRightName:"\u53F3\u4FA7\u64CD\u4F5C",operationRight:{click:t=>{d({message:"\u70B9\u51FB\u53F3\u4FA7\u64CD\u4F5C\u6309\u94AE",type:"success"})}}}],rules:{TimeSelectValue:[{required:!0,message:"\u8BF7\u9009\u62E9",trigger:"change"}]}}}};function k(l,n,a,s,r,t){const e=o("EsForm"),y=o("EsContainer");return g(),x(y,{title:"Transfer\u7EC4\u4EF6"},{default:i(()=>[u(e,{ref:"EsForm","list-query":r.listQuery,"form-item":r.formItem,rules:r.rules},null,8,["list-query","form-item","rules"])]),_:1})}var E=m(_,[["render",k]]);const C={name:"Transfer",data(){const l=()=>{const t=[];for(let e=1;e<=15;e++)t.push({key:e,label:`Option ${e}`,disabled:e%4==0});return t},n=c([1]),a=c([1]),s=c(l());return{listQuery:f({TransferValue:{rightValue:n,leftValue:a}}),formItem:[{type:"es-transfer",label:"Transfer",key:"TransferValue",col:24,attrs:{placeholder:"\u9009\u62E9",filterable:!0,"left-default-checked":[2,3],"right-default-checked":[1],"render-content":(t,e)=>t("span",null,e.key," - ",e.label),titles:["\u5DE6\u4FA7\u6807\u9898","\u53F3\u4FA7\u6807\u9898"],"button-texts":["\u5411\u5DE6","\u5411\u53F3"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:s},listeners:{change:t=>{d({message:"\u53F3\u4FA7\u5185\u5BB9\u4E3A\uFF1A"+t,type:"success"})}},operationLeftName:"\u5DE6\u4FA7\u64CD\u4F5C",operationLeft:{click:t=>{d({message:"\u70B9\u51FB\u5DE6\u4FA7\u64CD\u4F5C\u6309\u94AE",type:"success"})}},operationRightName:"\u53F3\u4FA7\u64CD\u4F5C",operationRight:{click:t=>{d({message:"\u70B9\u51FB\u53F3\u4FA7\u64CD\u4F5C\u6309\u94AE",type:"success"})}}}],rules:{TimeSelectValue:[{required:!0,message:"\u8BF7\u9009\u62E9",trigger:"change"}]}}}};function b(l,n,a,s,r,t){const e=o("EsForm"),y=o("EsContainer");return g(),x(y,{title:"Transfer filterable\u5C5E\u6027 "},{default:i(()=>[u(e,{ref:"EsForm","list-query":r.listQuery,"form-item":r.formItem,rules:r.rules},null,8,["list-query","form-item","rules"])]),_:1})}var A=m(C,[["render",b]]);const v={class:"markdown-body"},B=h("h1",null,"Transfer\u7EC4\u4EF6",-1),D=h("h3",null,"\u793A\u4F8B",-1),$=h("h3",null,"\u641C\u7D22\u72B6\u6001",-1),T=p('<h3>\u5C5E\u6027</h3><table><thead><tr><th style="text-align:center;">\u53C2\u6570</th><th style="text-align:center;">\u8BF4\u660E</th><th style="text-align:center;">\u7C7B\u578B</th><th style="text-align:center;">\u53EF\u9009\u503C</th><th style="text-align:center;">\u9ED8\u8BA4\u503C</th><th style="text-align:center;">\u662F\u5426\u5FC5\u586B</th></tr></thead><tbody><tr><td style="text-align:center;"><code>data</code></td><td style="text-align:center;">Transfer \u7684\u6570\u636E\u6E90</td><td style="text-align:center;">array[{ key, label, disabled }]</td><td style="text-align:center;">-</td><td style="text-align:center;"><code>[]</code></td><td style="text-align:center;">\u662F</td></tr><tr><td style="text-align:center;"><code>filterable</code></td><td style="text-align:center;">\u662F\u5426\u53EF\u641C\u7D22</td><td style="text-align:center;">boolean</td><td style="text-align:center;">-</td><td style="text-align:center;"><code>false</code></td><td style="text-align:center;">\u5426</td></tr><tr><td style="text-align:center;"><code>titles</code></td><td style="text-align:center;">\u81EA\u5B9A\u4E49\u5217\u8868\u6807\u9898</td><td style="text-align:center;">array</td><td style="text-align:center;">-</td><td style="text-align:center;"><code>['\u5DE6\u4FA7\u6807\u9898', '\u53F3\u4FA7\u6807\u9898']</code></td><td style="text-align:center;">\u5426</td></tr><tr><td style="text-align:center;"><code>button-texts</code></td><td style="text-align:center;">\u81EA\u5B9A\u4E49\u6309\u94AE\u6587\u6848</td><td style="text-align:center;">array</td><td style="text-align:center;">-</td><td style="text-align:center;"><code>[]</code></td><td style="text-align:center;">\u5426</td></tr><tr><td style="text-align:center;"><code>format</code></td><td style="text-align:center;">\u5217\u8868\u9876\u90E8\u52FE\u9009\u72B6\u6001\u6587\u6848</td><td style="text-align:center;">object{noChecked, hasChecked}</td><td style="text-align:center;">-</td><td style="text-align:center;"><code>{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }</code></td><td style="text-align:center;">\u5426</td></tr><tr><td style="text-align:center;"><code>left-default-checked</code></td><td style="text-align:center;">\u521D\u59CB\u72B6\u6001\u4E0B\u5DE6\u4FA7\u5217\u8868\u7684\u5DF2\u52FE\u9009\u9879\u7684 key \u6570\u7EC4</td><td style="text-align:center;">array</td><td style="text-align:center;">-</td><td style="text-align:center;"><code>[]</code></td><td style="text-align:center;">\u5426</td></tr><tr><td style="text-align:center;"><code>right-default-checked</code></td><td style="text-align:center;">\u521D\u59CB\u72B6\u6001\u4E0B\u53F3\u4FA7\u5217\u8868\u7684\u5DF2\u52FE\u9009\u9879\u7684 key \u6570\u7EC4</td><td style="text-align:center;">array</td><td style="text-align:center;">-</td><td style="text-align:center;"><code>[]</code></td><td style="text-align:center;">\u5426</td></tr></tbody></table><h3>\u4E8B\u4EF6</h3><table><thead><tr><th style="text-align:center;">\u4E8B\u4EF6\u540D</th><th style="text-align:center;">\u8BF4\u660E</th><th style="text-align:center;">\u53C2\u6570\u5217\u8868</th><th style="text-align:center;">\u53C2\u6570\u8BF4\u660E</th></tr></thead><tbody><tr><td style="text-align:center;"><code>click</code></td><td style="text-align:center;">\u70B9\u51FB\u4E8B\u4EF6</td><td style="text-align:center;">$event</td><td style="text-align:center;">\u539F\u751F\u7684 dom event</td></tr><tr><td style="text-align:center;"><code>customEvent</code></td><td style="text-align:center;">\u81EA\u5B9A\u4E49\u4E8B\u4EF6</td><td style="text-align:center;">[a, b, c]</td><td style="text-align:center;">a\uFF1A\u53C2\u6570\u4E00\uFF1Bb\uFF1A\u53C2\u6570\u4E8C\uFF1Bc\uFF1A\u53C2\u6570\u4E09</td></tr></tbody></table>',4),q={setup(l,{expose:n}){return n({frontmatter:{}}),(s,r)=>{const t=o("Preview");return g(),F("div",v,[B,D,u(t,{"comp-name":"Transfer","demo-name":"demo"},{default:i(()=>[u(E)]),_:1}),$,u(t,{"comp-name":"Transfer","demo-name":"demo2"},{default:i(()=>[u(A)]),_:1}),T])}}};export{q as default};