@vuux/video
Version:
Vue Nuxt 视频播放器
2 lines (1 loc) • 1.84 kB
JavaScript
;const l=require("vue"),U=require("@vuux/utils"),$=(e,n,L,p)=>{const o={offsetX:0,offsetY:0},v=l.ref(!1),m=t=>{t.type==="touchmove"&&t.cancelable&&t.preventDefault()},g=t=>{v.value&&t.stopPropagation()},c=t=>{document.body.addEventListener("touchmove",m,{passive:!1});const Y="touches"in t?t.touches[0].clientX:t.clientX,w="touches"in t?t.touches[0].clientY:t.clientY,y=Y,D=w,{offsetX:r,offsetY:d}=o,u=e.value.getBoundingClientRect(),f=u.left,E=u.top,x=u.width,M=u.height,b=document.documentElement.clientWidth,H=document.documentElement.clientHeight,T=-f+r,W=-E+d,k=b-f-x+r,q=H-E-M+d,a=s=>{v.value=!0;const B=r+("touches"in s?s.touches[0].clientX:s.clientX)-y,C=d+("touches"in s?s.touches[0].clientY:s.clientY)-D;o.offsetX=Math.min(Math.max(B,T),k),o.offsetY=Math.min(Math.max(C,W),q),e.value&&(e.value.style.transitionDuration="0s",e.value.style.transform=`translate(${o.offsetX}px, ${o.offsetY}px)`)},i=async()=>{await U.Utils.wait(50),v.value=!1,document.body.removeEventListener("touchmove",m),document.removeEventListener("mousemove",a),document.removeEventListener("touchmove",a),document.removeEventListener("mouseup",i),document.removeEventListener("touchend",i)};document.addEventListener("mousemove",a),document.addEventListener("touchmove",a),document.addEventListener("mouseup",i),document.addEventListener("touchend",i)},X=()=>{n.value&&e.value&&(n.value.addEventListener("mousedown",c),n.value.addEventListener("touchstart",c,{passive:!0}))},h=()=>{n.value&&e.value&&(n.value.removeEventListener("mousedown",c),n.value.removeEventListener("touchstart",c))};l.onMounted(()=>{e.value?.addEventListener("click",g,{capture:!0}),l.watchEffect(()=>{L.value?X():h(),p.value&&e.value&&(o.offsetX=0,o.offsetY=0,e.value.style.transitionDuration="",e.value.style.transform="")})}),l.onBeforeUnmount(()=>{h()})};module.exports=$;