uv-ui
Version:
基于vue3的移动端组件库
2 lines (1 loc) • 3.82 kB
JavaScript
;const e=require("vue"),b=require("../overlay/index.cjs"),m=require("../icon/index.cjs");require("./select.vue_vue_type_style_index_0_lang.cjs");const B={key:0,class:"uv-select-multiple"},N={key:0,class:"uv-select-multiple-item"},V={class:"uv-select-multiple-item-text"},x={key:1,class:"uv-select-multiple-placeholder"},C={key:2,class:"uv-select-multiple-item"},E={key:1,class:"uv-select-input"},w=["value","placeholder","disabled"],S=e.createElementVNode("div",{class:"uv-select-box-arrow"},null,-1),_={key:0,class:"uv-select-box-content"},z=["onClick"],D={key:1,class:"uv-select-box-content-empty"},I=e.createElementVNode("div",{class:"uv-select-box-content-empty-default"}," \u65E0\u6570\u636E ",-1),j={name:"UvSelect"},q=Object.assign(j,{props:{modelValue:{type:[String,Array,Number]},placeholder:{type:String},filterable:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},list:{type:Array},keyName:{type:String},itemBgColor:{type:String}},emits:["update:modelValue","change"],setup(l,{emit:i}){const a=l,c=e.ref(!1),d=e.ref(null),r=e.ref("bottom");function k(){(d.value?d.value.getBoundingClientRect().top:0)>screen.availHeight/2?r.value="top":r.value="bottom"}const h=()=>{k(),a.filterable&&(u.value=a.list),c.value=!c.value},p=()=>{c.value=!1},u=e.ref(a.list),y=s=>{const{value:n}=s.target;i("update:modelValue",n),u.value=a.list.filter(t=>t[a.keyName].includes(n))},o=e.ref([]),f=s=>{const n=s[a.keyName];if(a.multiple){const t=o.value.findIndex(v=>v===n);console.log(t),t>-1?o.value.splice(t,1):o.value.push(n),i("update:modelValue",o.value),i("change",o.value)}else i("update:modelValue",n),i("change",s),c.value=!1},g=()=>{o.value.splice(0,1)};return(s,n)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(e.unref(b),{show:c.value,overlay:!1,onClick:p},null,8,["show"]),e.createElementVNode("div",{ref_key:"selectRef",ref:d,class:e.normalizeClass(["uv-select",c.value?"uv-select-active":""]),onClick:h},[l.multiple?(e.openBlock(),e.createElementBlock("div",B,[o.value.length>0?(e.openBlock(),e.createElementBlock("div",N,[e.createElementVNode("div",V,e.toDisplayString(o.value[0]),1),e.createVNode(e.unref(m),{size:"16",name:"error",color:"#f56c6c",onClick:e.withModifiers(g,["stop"])},null,8,["onClick"])])):(e.openBlock(),e.createElementBlock("div",x,e.toDisplayString(l.placeholder),1)),o.value.length>1?(e.openBlock(),e.createElementBlock("div",C," +"+e.toDisplayString(o.value.length-1),1)):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock("div",E,[e.createElementVNode("input",{value:l.modelValue,placeholder:l.placeholder,onInput:y,disabled:!l.filterable},null,40,w)])),e.createElementVNode("div",{class:e.normalizeClass(["uv-select-arrow",c.value?"uv-select-arrow-up":""])},[e.createVNode(e.unref(m),{size:"16",name:"arrow-up-bold",color:"#aaadb4"})],2),e.createVNode(e.Transition,{name:r.value==="bottom"?"select-bottom":"select-top"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["uv-select-box",r.value==="bottom"?"uv-select-box-show-bottom":"uv-select-box-show-top"])},[S,u.value&&u.value.length>0?(e.openBlock(),e.createElementBlock("div",_,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.value,(t,v)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["uv-select-box-item",l.multiple?l.modelValue.includes(t[l.keyName])?"uv-select-box-item-select":"":t[l.keyName]===l.modelValue?"uv-select-box-item-select":""]),style:e.normalizeStyle({backgroundColor:l.itemBgColor}),key:l.keyName?t[l.keyName]:v,onClick:e.withModifiers(A=>f(t),["stop"])},e.toDisplayString(t[l.keyName]),15,z))),128))])):(e.openBlock(),e.createElementBlock("div",D,[e.renderSlot(s.$slots,"empty",{},()=>[I])]))],2),[[e.vShow,c.value]])]),_:3},8,["name"])],2)],64))}});module.exports=q;