UNPKG

vuux

Version:

Vue3 Nuxt3 Nuxt4 组件库

2 lines (1 loc) 2.64 kB
"use strict";const Y=require("vue"),G=require("@vuux/utils"),J=(c,g)=>{const t=c.getBoundingClientRect(),s=g.getBoundingClientRect(),i=[t.top-Math.max(0,s.top),s.right-t.right,Math.min(window.innerHeight,s.bottom)-t.bottom,t.left-s.left].map(Math.abs),a=i.findIndex(E=>E===Math.min(...i)),e=a%2===0?"y":"x";return{value:i[a]*(a===0||a===3?-1:1),axis:e==="y"?"offsetY":"offsetX"}},K={mounted(c,g){const t={adsorb:!1,...g.value},s=Y.ref(c),i=Y.ref(!1),a=Y.ref(t.parent&&document.querySelector(t.parent)||s.value.parentNode),e={offsetX:0,offsetY:0},x=n=>{n.type==="touchmove"&&n.cancelable&&n.preventDefault()},E=n=>{i.value&&n.stopPropagation()},L=n=>{n.cancelable&&n.preventDefault(),document.body.addEventListener("touchmove",x,{passive:!1});const P="touches"in n?n.touches[0].clientX:n.clientX,$="touches"in n?n.touches[0].clientY:n.clientY,k=P,S=$,{offsetX:f,offsetY:m}=e,l=c.getBoundingClientRect(),d=l.left,v=l.top,b=l.width,y=l.height,z=t.parent?a.value.clientWidth:document.documentElement.clientWidth,N=t.parent?a.value.clientHeight:document.documentElement.clientHeight,w=-d+f,R=-v+m,T=z-d-b+f,C=N-v-y+m,p=a.value.getBoundingClientRect(),U=p.left,j=p.top,A=p.right,F=p.bottom,D=U-d+f,B=j-v+m,H=A-d-b+f,I=F-v-y+m,O=(o,r,u="0s")=>{s.value&&(s.value.style.transition=`transform ${u} cubic-bezier(0.34, -0.37, 0.73, 1.38)`,s.value.style.transform=`translate(${o}px, ${r}px)`)},h=o=>{o.cancelable&&o.preventDefault(),i.value=!0;const r=f+("touches"in o?o.touches[0].clientX:o.clientX)-k,u=m+("touches"in o?o.touches[0].clientY:o.clientY)-S;t.parent?(e.offsetX=Math.min(Math.max(r,D),H),e.offsetY=Math.min(Math.max(u,B),I)):(e.offsetX=Math.min(Math.max(r,w),T),e.offsetY=Math.min(Math.max(u,R),C)),O(e.offsetX,e.offsetY)},M=async()=>{if(await G.Utils.wait(50),i.value=!1,document.body.removeEventListener("touchmove",x),document.removeEventListener("mousemove",h),document.removeEventListener("touchmove",h),document.removeEventListener("mouseup",M),document.removeEventListener("touchend",M),s.value&&t.adsorb){const{value:o,axis:r}=J(s.value,t.parent?a.value:document.body),u=e[r]+o,X=r==="offsetX",W=X?t.parent?D:w:t.parent?B:R,q=X?t.parent?H:T:t.parent?I:C;X?e.offsetX=Math.min(Math.max(u,W),q):e.offsetY=Math.min(Math.max(u,W),q),O(e.offsetX,e.offsetY,"0.3s")}};document.addEventListener("mousemove",h),document.addEventListener("touchmove",h,{passive:!1}),document.addEventListener("mouseup",M),document.addEventListener("touchend",M),c.addEventListener("touchstart",L,{passive:!0})};c.addEventListener("click",E,{capture:!0}),c.addEventListener("mousedown",L),c.addEventListener("touchstart",L,{passive:!0})}};module.exports=K;