uv-ui
Version:
基于vue3的移动端组件库
2 lines (1 loc) • 2.35 kB
JavaScript
;const t=require("vue"),B=require("../../hooks/useThrottle.cjs");require("../../hooks/useCountDown.cjs");require("./picker-column.vue_vue_type_style_index_0_lang.cjs");const S={name:"UvPickerColumn"},x=Object.assign(S,{props:{list:{type:Array,default:()=>[]},keyName:{type:[String,Number],default:"value"},labelName:{type:[String,Number],default:"label"},value:{type:[String,Number],default:""},columnsType:{type:String}},emits:["change","first-open"],setup(v,{emit:r}){const u=v,n=t.ref(null),g=t.computed(()=>typeof n.value=="number"?{transform:`translate(-50%, ${n.value}px)`}:{transform:"translate(-50%, -18px)"}),l=t.ref(0),m=["gray","#ccc","#ddd","#eee"],h=[.96,.9,.88,.84];function d(e){let a="#000",o=1;const s=m.length-1;if(e>l.value){const c=e-l.value>s?s:e-l.value-1;a=m[c],o=h[c]}else if(e<l.value){const c=l.value-e>s?s:l.value-e-1;a=m[c],o=h[c]}return{color:a,transform:`scale(${o})`}}function y(){return u.list[l.value]||(l.value=u.list.length-1,i(l.value)),u.list[l.value][u.keyName]}const p=t.ref(""),i=e=>{n.value=-36*e-18};t.watch(()=>u.list,e=>{u.columnsType==="cascade"?(l.value=0,i(0),r("first-open",e[0][u.keyName])):(p.value=y(),r("first-open",p.value))},{immediate:!0}),t.watch(()=>u.value,e=>{if(e&&e!==p.value){const a=u.list.findIndex(o=>o[u.keyName]===e);a>-1&&(l.value=a,i(a),r("first-open",e))}},{immediate:!0});let k=null;function _(e){const a=n.value||-18;k=e.touches[0].clientY-a}function b(e){T(e)}function N(){setTimeout(()=>{i(l.value)},100)}const f=t.ref(null),T=B.useThrottle(e=>{n.value=e.touches[0].clientY-k,n.value>36?n.value=36:n.value<-f.value.offsetHeight-36&&(n.value=-f.value.offsetHeight-36),l.value=Math.abs(Math.ceil(n.value/36)),l.value<=0||n.value>0?l.value=0:(l.value>u.list.length-1||n.value<-f.value.offsetHeight-18)&&(l.value=u.list.length-1),r("change",y())},20);return(e,a)=>(t.openBlock(),t.createElementBlock("div",{class:"uv-picker-column",onTouchstart:_,onTouchmove:b,onTouchend:N},[t.createElementVNode("ul",{class:"uv-picker-content-box",ref_key:"pickerBoxRef",ref:f,style:t.normalizeStyle(t.unref(g))},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(v.list,(o,s)=>(t.openBlock(),t.createElementBlock("li",{class:"uv-picker-content-item",key:s,style:t.normalizeStyle(d(s))},t.toDisplayString(o[v.labelName]),5))),128))],4)],32))}});module.exports=x;