uv-ui
Version:
基于vue3的移动端组件库
2 lines (1 loc) • 1.73 kB
JavaScript
;const t=require("vue"),y=require("../../hooks/useTouch.cjs");require("../../hooks/useCountDown.cjs");const g=require("../../utils/common.cjs");require("./floating-panel.vue_vue_type_style_index_0_lang.cjs");const T=t.createElementVNode("div",{class:"uv-floating-panel-header"},[t.createElementVNode("div",{class:"uv-floating-panel-header-bar"})],-1),x={name:"UvFloatingPanel"},D=Object.assign(x,{props:{height:{type:Number,default:100},maxHeight:{type:Number,default:384},duration:{type:Number,default:.2},contentDraggable:{type:Boolean,default:!1}},emits:["heightChange"],setup(f,{emit:v}){const n=f,r=y.useTouch(),i=t.ref(!1),o=t.ref(n.height),u=t.ref(null),d=t.computed(()=>({height:g.addUnit(n.maxHeight),transform:`translateY(calc(100% + ${g.addUnit(-o.value)}))`,transition:i.value?"none":`transform ${n.duration}s`})),h=.2,m=e=>{const a=Math.abs(e),{height:l,maxHeight:s}=n;return a>s?-(s+(a-s)*h):a<l?-(l-(l-a)*h):e};let c="";const p=e=>{r.start(e),i.value=!0,c=-o.value},_=e=>{var s;r.move(e);const a=e.target;if(u.value===a||((s=u.value)==null?void 0:s.contains(a))){if(!n.contentDraggable)return;if(-c<n.maxHeight)e.cancelable&&e.preventDefault(),e.stopPropagation();else if(!(u.value.scrollTop<=0&&r.deltaY.value>0))return}const l=r.deltaY.value+c;o.value=-m(l)},b=()=>{i.value=!1,o.value=o.value>n.maxHeight/2?n.maxHeight:n.height,o.value!==-c&&v("heightChange",{height:o.value})};return(e,a)=>(t.openBlock(),t.createElementBlock("div",{class:"uv-floating-panel",style:t.normalizeStyle(t.unref(d)),onTouchstart:p,onTouchmove:_,onTouchend:b},[T,t.createElementVNode("div",{class:"uv-floating-panel-content",ref_key:"contentRef",ref:u},[t.renderSlot(e.$slots,"default")],512)],36))}});module.exports=D;