vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
2 lines (1 loc) • 2.35 kB
JavaScript
;const v=require("vue"),S=require("@vuux/utils"),j=(o,c,T,B)=>{const t={offsetX:0,offsetY:0},f=v.ref(!1),g=n=>{n.type==="touchmove"&&n.cancelable&&n.preventDefault()},H=n=>{f.value&&n.stopPropagation()},i=n=>{document.body.addEventListener("touchmove",g,{passive:!1});const $="touches"in n?n.touches[0].clientX:n.clientX,C="touches"in n?n.touches[0].clientY:n.clientY,k=$,q=C,{offsetX:m,offsetY:d}=t,u=o.value.getBoundingClientRect(),E=u.left,L=u.top,U=u.width,z=u.height,F=document.documentElement.clientWidth,I=document.documentElement.clientHeight,X=-E+m,Y=-L+d,x=F-E-U+m,M=I-L-z+d,a=e=>{f.value=!0;const r=m+("touches"in e?e.touches[0].clientX:e.clientX)-k,s=d+("touches"in e?e.touches[0].clientY:e.clientY)-q;t.offsetX=Math.min(Math.max(r,X),x),t.offsetY=Math.min(Math.max(s,Y),M),o.value&&(o.value.style.transitionDuration="0s",o.value.style.transform=`translate(${t.offsetX}px, ${t.offsetY}px)`)},l=async()=>{if(await S.Utils.wait(50),f.value=!1,document.body.removeEventListener("touchmove",g),document.removeEventListener("mousemove",a),document.removeEventListener("touchmove",a),document.removeEventListener("mouseup",l),document.removeEventListener("touchend",l),o.value&&B?.value){const e=o.value.getBoundingClientRect(),r=document.documentElement.clientWidth,s=document.documentElement.clientHeight,b=e.left,P=r-e.right,h=e.top,y=s-e.bottom,w=s*.3,D=s*.7;h<w?t.offsetY=-h+t.offsetY:y<s-D&&(t.offsetY=s-e.bottom+t.offsetY),h>=w&&y>=s-D&&(b<P?t.offsetX=-b+t.offsetX:t.offsetX=r-e.right+t.offsetX),t.offsetX=Math.min(Math.max(t.offsetX,X),x),t.offsetY=Math.min(Math.max(t.offsetY,Y),M),o.value.style.transitionDuration="0.3s",o.value.style.transitionTimingFunction="cubic-bezier(0.34, -0.37, 0.73, 1.38)",o.value.style.transform=`translate(${t.offsetX}px, ${t.offsetY}px)`}};document.addEventListener("mousemove",a),document.addEventListener("touchmove",a),document.addEventListener("mouseup",l),document.addEventListener("touchend",l)},W=()=>{c.value&&o.value&&(c.value.addEventListener("mousedown",i),c.value.addEventListener("touchstart",i,{passive:!0}))},p=()=>{c.value&&o.value&&(c.value.removeEventListener("mousedown",i),c.value.removeEventListener("touchstart",i))};v.onMounted(()=>{o.value?.addEventListener("click",H,{capture:!0}),v.watchEffect(()=>{T.value?W():p()})}),v.onBeforeUnmount(()=>{p()})};module.exports=j;