uv-ui/lib/components/cascader/cascader.cjs

基于vue3的移动端组件库

"use strict";const e=require("vue"),A=require("../popup/index.cjs"),R=require("../tab/index.cjs"),z=require("../icon/index.cjs"),D=require("../../hooks/useTouch.cjs");require("../../hooks/useCountDown.cjs");require("./cascader.vue_vue_type_style_index_0_lang.cjs");const I={class:"uv-cascader"},W=["onClick"],_={name:"UvCascader"},F=Object.assign(_,{props:{popupProps:{type:Object,default:()=>({})},tabProps:{type:Object,default:()=>({})},list:{type:Array,default:()=>[]},labelKey:{type:String,default:"label"},valueKey:{type:String,default:"value"},childrenKey:{type:String,default:"children"},placeholder:{type:String,default:"\u8BF7\u9009\u62E9"}},emits:["finish","change","close"],setup(o,{expose:w,emit:k}){const s=o,v=e.ref(!1),S=()=>{v.value=!0},B=()=>{v.value=!1,k("close")},u=e.ref(0),i=e.ref([]),g=e.ref(null),b=e.ref(null),h=e.ref(null),d=e.ref(0);e.watch([()=>v.value,()=>i.value.length],()=>{v.value&&e.nextTick(()=>{d.value=g.value.offsetWidth,h.value=g.value.querySelectorAll(".uv-cascader-content-item-warp")})});const T=e.computed(()=>i.value.length*d.value),x=e.ref(),q=l=>{if(x.value=l[s.valueKey],k("change",l[s.valueKey]),K(),!l[s.childrenKey]){const n=[],t=[];i.value.forEach(c=>{c.selected&&(n.push(c.selected[s.valueKey]),t.push(c.selected[s.labelKey]))}),k("finish",{value:n.join("/"),label:t.join("/")}),B()}},C=e.computed(()=>{const{labelKey:l,placeholder:n}=s,t=[];return i.value.forEach(c=>{const{selected:a}=c,r=a?a[l]:n;t.push(r)}),t});e.watch(u,l=>{f.value=-d.value*l});const L=l=>{u.value=l},y=D.useTouch(),f=e.ref(0);let j=0;const N=()=>{b.value.style.transition="transform 0.3s ease"},O=()=>{b.value.style.transition="none"};function P(l){y.start(l),j=f.value}function X(l){y.move(l),O();const{deltaX:n}=y;n.value<0&&u.value===h.value.length-1||n.value>0&&u.value===0||(f.value=j+n.value)}function $(l){const{deltaX:n}=y;N();let t=u.value;n.value<-d.value/3?(t++,t>h.value.length-1&&(t=h.value.length-1)):n.value>d.value/3&&(t--,t<0&&(t=0)),u.value=t,f.value=-d.value*u.value}const E=(l,n)=>{const{valueKey:t,childrenKey:c}=s;for(const a of l){if(a[t]===n)return[a];if(a[c]){const r=E(a[c],n);if(r)return[a,...r]}}},K=()=>{const{list:l,valueKey:n,childrenKey:t}=s;if(x.value!==void 0){const c=E(l,x.value);if(c){let a=l;i.value=c.map(r=>{const m={options:a,selected:r},p=a.find(V=>V[n]===r[n]);return p&&(a=p[t]),m}),a&&i.value.push({options:a,selected:null}),e.nextTick(()=>{u.value=C.value.length-1});return}}i.value=[{options:l,selected:null}]};return K(),e.watch(()=>s.list,K,{deep:!0}),w({open:S,close:B}),(l,n)=>(e.openBlock(),e.createBlock(e.unref(A),e.mergeProps({class:"cascader-popup",modelValue:v.value,"onUpdate:modelValue":n[0]||(n[0]=t=>v.value=t),close:"",round:""},o.popupProps),{default:e.withCtx(()=>[e.createElementVNode("div",I,[v.value?(e.openBlock(),e.createBlock(e.unref(R),e.mergeProps({key:0,color:"#969799","acitve-index":u.value,onChange:L,list:e.unref(C),placeholder:o.placeholder,scroll:"",shrink:""},o.tabProps),null,16,["acitve-index","list","placeholder"])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"uv-cascader-content",ref_key:"contentRef",ref:g},[e.createElementVNode("div",{class:"uv-cascader-content-list",onTouchstart:P,onTouchmove:X,onTouchend:$,ref_key:"contentListRef",ref:b,style:e.normalizeStyle({width:`${e.unref(T)}px`,transform:`translateX(${f.value}px)`})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,(t,c)=>(e.openBlock(),e.createElementBlock("div",{class:"uv-cascader-content-item-warp",key:c},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(a,r)=>{var m,p;return e.openBlock(),e.createElementBlock("div",{onClick:V=>q(a),class:e.normalizeClass(["uv-cascader-content-item",a[o.valueKey]===((m=t.selected)==null?void 0:m[o.valueKey])?"uv-cascader-content-active-item":""]),key:r},[e.createElementVNode("div",null,e.toDisplayString(a[o.labelKey]),1),a[o.valueKey]===((p=t.selected)==null?void 0:p[o.valueKey])?(e.openBlock(),e.createBlock(e.unref(z),{key:0,name:"select",size:"20"})):e.createCommentVNode("",!0)],10,W)}),128))]))),128))],36)],512)])]),_:1},16,["modelValue"]))}});module.exports=F;