| 12 |
- var e=Object.defineProperty,l=Object.defineProperties,a=Object.getOwnPropertyDescriptors,t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable,s=(l,a,t)=>a in l?e(l,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):l[a]=t,p=(e,l)=>{for(var a in l||(l={}))r.call(l,a)&&s(e,a,l[a]);if(t)for(var a of t(l))o.call(l,a)&&s(e,a,l[a]);return e},d=(e,t)=>l(e,a(t)),i=(e,l,a)=>new Promise(((t,r)=>{var o=e=>{try{p(a.next(e))}catch(l){r(l)}},s=e=>{try{p(a.throw(e))}catch(l){r(l)}},p=e=>e.done?t(e.value):Promise.resolve(e.value).then(o,s);p((a=a.apply(e,l)).next())}));import{Q as n}from"./index-Dx5_zIAw.js";/* empty css *//* empty css */import{_ as u}from"./index-C5wfpnax.js";import{_ as c}from"./index-dtfBA0pi.js";import{k as v,r as b,c as m,l as y,P as h,D as g,R as k,x as _,u as f,i as x,G as w,a5 as j,X as C,C as P,V as D,W as Y,a8 as V,E as O}from"./vendor-CgKklJ4r.js";import{_ as S}from"./_plugin-vue_export-helper-BCo6x5W8.js";/* empty css */import"./index-DTcq2BvU.js";/* empty css *//* empty css *//* empty css */import"./iconfont-DPUoc2h2.js";const H={class:"search-bar"},I={class:"code"},M={class:"button-group"},E=S(v({__name:"search-bar",emits:["update:modelValue","search","reset"],setup(e,{emit:l}){const a=l,t=b(),r=b(),o=b({name:void 0,phone:void 0,level:void 0,address:void 0,date:void 0,daterange:void 0,status:void 0}),s=b({name:void 0,phone:void 0,level:void 0,address:void 0,slots:void 0,date:void 0,daterange:void 0,cascader:void 0,checkboxgroup:void 0,userGender:void 0,iconSelector:void 0,status:void 0,systemName:void 0}),v={name:[{required:!0,message:"请输入用户名",trigger:"blur"}],phone:[{required:!0,message:"请输入手机号",trigger:"blur"},{min:11,max:11,message:"请输入11位手机号",trigger:"blur"},{pattern:/^1[3456789]\d{9}$/,message:"请输入正确的手机号",trigger:"blur"}],level:[{required:!0,message:"请选择等级",trigger:"change"}],address:[{required:!0,message:"请输入地址",trigger:"blur"}]},S=b(100),E=b("right"),F=b(6),R=b(12),q=b([]),B=[{label:"普通用户",value:"normal"},{label:"VIP用户",value:"vip"},{label:"高级VIP",value:"svip"},{label:"企业用户",value:"enterprise",disabled:!0}];function N(){return i(this,null,(function*(){q.value=yield new Promise((e=>{setTimeout((()=>{e(B)}),500)})),q.value.length&&O.success("成功获取到数据")}))}const T={username:{label:"用户名",key:"name",type:"input",placeholder:"请输入用户名",clearable:!0},phone:{label:"手机号",key:"phone",type:"input",props:{placeholder:"请输入手机号",maxlength:"11"}},level:{label:"用户等级",key:"level",type:"select",props:{placeholder:"请选择等级",options:B}},address:{label:"地址",key:"address",type:"input",placeholder:"请输入地址"},date:{label:"日期",key:"date",type:"datetime",props:{style:{width:"100%"},placeholder:"请选择日期",type:"date",valueFormat:"YYYY-MM-DD",shortcuts:[{text:"今日",value:new Date},{text:"昨日",value:()=>new Date(Date.now()-864e5)},{text:"一周前",value:()=>new Date(Date.now()-6048e5)}]}},gender:{label:"性别",key:"userGender",type:"radiogroup",props:{options:[{label:"男",value:"1"},{label:"女",value:"2"}]}}},U=m((()=>[T.username,{label:"密码",key:"password",type:"input",props:{type:"password",placeholder:"请输入密码",clearable:!0}},T.phone,T.level,T.address,T.date,T.gender])),G=b({label:"用户名",key:"name",type:"input",props:{placeholder:"请输入用户名",clearable:!0}}),W=b(!0),z=[{value:"guide",label:"指南",children:[{value:"disciplines",label:"规范",children:[{value:"consistency",label:"一致性"},{value:"feedback",label:"反馈"},{value:"efficiency",label:"效率"},{value:"controllability",label:"可控性"}]}]},{value:"components",label:"组件",children:[{value:"basic",label:"基础组件",children:[{value:"button",label:"按钮"},{value:"form",label:"表单"},{value:"table",label:"表格"}]}]}],A=[{value:"1",label:"一级 1",children:[{value:"1-1",label:"二级 1-1",children:[{value:"1-1-1",label:"三级 1-1-1"}]}]},{value:"2",label:"一级 2",children:[{value:"2-1",label:"二级 2-1",children:[{value:"2-1-1",label:"三级 2-1-1"}]},{value:"2-2",label:"二级 2-2",children:[{value:"2-2-1",label:"三级 2-2-1"}]}]}],Q=[{label:"选项1",value:"option1"},{label:"选项2",value:"option2"},{label:"选项3",value:"option3"},{label:"选项4",value:"option4"},{label:"选项5（disabled）",value:"option5",disabled:!0}],X=m((()=>[...W.value?[G.value]:[],p({},T.phone),d(p({},T.level),{props:{placeholder:"请选择等级",options:q.value}}),T.address,T.date,{label:"日期时间",key:"datetime",type:"datetime",props:{style:{width:"100%"},placeholder:"请选择日期时间",type:"datetime",valueFormat:"YYYY-MM-DD HH:mm:ss"}},{label:"日期范围",key:"daterange",type:"datetime",props:{type:"daterange",valueFormat:"YYYY-MM-DD",rangeSeparator:"至",startPlaceholder:"开始日期",endPlaceholder:"结束日期"}},{label:"日期时间范围",key:"datetimerange",type:"datetime",props:{type:"datetimerange",valueFormat:"YYYY-MM-DD HH:mm:ss",rangeSeparator:"至",startPlaceholder:"开始日期时间",endPlaceholder:"结束日期时间"}},{label:"时间选择",key:"timeselect",type:"timeselect",props:{placeholder:"请选择时间",type:"time",valueFormat:"HH:mm:ss"}},{label:"时间选择器",key:"timepicker",type:"timepicker",props:{style:{width:"100%"},placeholder:"请选择时间",type:"time",valueFormat:"HH:mm:ss"}},{label:"级联选择",key:"cascader",type:"cascader",props:{placeholder:"请选择级联选择器",clearable:!0,style:{width:"100%"},collapseTags:!0,maxCollapseTags:1,props:{multiple:!0},options:z}},{label:"树型选择器",key:"treeSelect",type:"treeselect",props:{showCheckbox:!0,multiple:!0,clearable:!0,data:A}},{label:"插槽",key:"slots",type:"input",placeholder:"请输入邮箱"},{label:"渲染组件",key:"iconSelector",type:()=>y(c,{iconType:n.UNICODE,width:"100%"}),props:{placeholder:"请输入备注",type:"textarea",rows:4}},{label:"自定义组件",key:"customComponent",type:()=>y("div",{style:"color: var(--art-gray-600); border: 1px solid var(--art-border-dashed-color); padding: 0px 15px; border-radius: 6px"},"我是一个自定义组件"),props:{placeholder:"请输入备注",type:"textarea",rows:4,style:{width:"100%"}}},{label:"复选框",key:"checkboxgroup",type:"checkboxgroup",span:12,props:{options:Q}},p({},T.gender),{label:"是否启用",key:"isEnabled",type:"switch",props:{placeholder:"请选择是否启用"}},{label:"年龄",key:"age",type:"number",slots:{suffix:()=>y("span",{style:"color: #909399; font-size: 12px"},"岁")}},{label:"网站地址",key:"website",type:"input",placeholder:"请输入网站名称",slots:{prepend:()=>y("span","https://"),append:()=>y("span",".com")}},{label:"事件演示",key:"event",type:"input",props:{placeholder:"输入内容触发事件，控制台查看",clearable:!0,prefixIcon:"Search",onInput(e){},onClear(){}}},{label:"多行输入",key:"remark",type:"input",props:{placeholder:"请输入备注",type:"textarea",rows:2}},{label:"评分",key:"rate",type:"rate",props:{size:"large",placeholder:"请选择评分"}},{label:"禁用",key:"diaabled",type:"input",placeholder:"我被禁用了",disabled:!0},{label:"滑块",key:"slider",type:"slider"},{label:"隐藏",key:"email",type:"input",hidden:!0},{label:"根据条件隐藏",key:"systemName",type:"input",hidden:"mac"===s.value.systemName,placeholder:"输入 mac 组件隐藏"},{label:"栅格布局",key:"sg1",type:"input",span:12,placeholder:"示例：栅格 span=12 占容器一半宽度，span=24 占满容器"}])),$=(e,l,t)=>({reset:()=>{a("reset")},search:()=>i(this,null,(function*(){yield e.value.validate(),a("search",l.value)})),validate:()=>e.value.validate()}),J=m((()=>$(t,o))),K=m((()=>$(r,s))),L=()=>J.value.reset(),Z=()=>J.value.search(),ee=()=>K.value.reset(),le=()=>K.value.search(),ae=()=>K.value.validate(),te=()=>r.value.reset(),re=()=>{G.value=d(p({},G.value),{label:"昵称",props:{placeholder:"请输入昵称"}})},oe=()=>{W.value=!1,s.value.name=void 0};return(e,l)=>{const a=u,p=j,d=V;return g(),h("div",H,[l[20]||(l[20]=k("h2",{class:"title"},"基础示例（默认收起）",-1)),_(a,{ref_key:"searchBarBasicRef",ref:t,modelValue:f(o),"onUpdate:modelValue":l[0]||(l[0]=e=>x(o)?o.value=e:null),items:f(U),onReset:L,onSearch:Z},null,8,["modelValue","items"]),l[21]||(l[21]=k("h2",{class:"title m-15"},"完整示例（默认展开）",-1)),_(a,{ref_key:"searchBarAdvancedRef",ref:r,modelValue:f(s),"onUpdate:modelValue":l[2]||(l[2]=e=>x(s)?s.value=e:null),items:f(X),rules:v,defaultExpanded:!0,labelWidth:f(S),labelPosition:f(E),span:f(F),gutter:f(R),onReset:ee,onSearch:le},{slots:w((()=>[_(p,{modelValue:f(s).slots,"onUpdate:modelValue":l[1]||(l[1]=e=>f(s).slots=e),placeholder:"我是插槽渲染出来的组件"},null,8,["modelValue"])])),_:1},8,["modelValue","items","labelWidth","labelPosition","span","gutter"]),k("div",I,[k("pre",null,[k("code",null,C(f(s)),1)])]),k("div",M,[_(d,{onClick:N},{default:w((()=>l[9]||(l[9]=[Y(" 获取用户等级数据 ")]))),_:1,__:[9]}),_(d,{onClick:ae},{default:w((()=>l[10]||(l[10]=[Y(" 校验表单 ")]))),_:1,__:[10]}),_(d,{onClick:te},{default:w((()=>l[11]||(l[11]=[Y(" 重置 ")]))),_:1,__:[11]}),f(W)?(g(),P(d,{key:0,onClick:re},{default:w((()=>l[12]||(l[12]=[Y(" 修改用户名 ")]))),_:1,__:[12]})):D("",!0),f(W)?(g(),P(d,{key:1,onClick:oe},{default:w((()=>l[13]||(l[13]=[Y(" 删除用户名 ")]))),_:1,__:[13]})):D("",!0),_(d,{onClick:l[3]||(l[3]=e=>S.value=120)},{default:w((()=>l[14]||(l[14]=[Y(" 修改 label 宽度 ")]))),_:1,__:[14]}),_(d,{onClick:l[4]||(l[4]=e=>F.value=8)},{default:w((()=>l[15]||(l[15]=[Y(" 设置一行显示的组件数 ")]))),_:1,__:[15]}),_(d,{onClick:l[5]||(l[5]=e=>R.value=50)},{default:w((()=>l[16]||(l[16]=[Y(" 修改 gutter ")]))),_:1,__:[16]}),_(d,{onClick:l[6]||(l[6]=e=>E.value="left")},{default:w((()=>l[17]||(l[17]=[Y(" label 左对齐 ")]))),_:1,__:[17]}),_(d,{onClick:l[7]||(l[7]=e=>E.value="right")},{default:w((()=>l[18]||(l[18]=[Y(" label 右对齐 ")]))),_:1,__:[18]}),_(d,{onClick:l[8]||(l[8]=e=>E.value="top")},{default:w((()=>l[19]||(l[19]=[Y(" label 顶部对齐 ")]))),_:1,__:[19]})])])}}}),[["__scopeId","data-v-ba237435"]]);export{E as default};
|
