@vuux/video/dist/es/src/hook/useDrag.mjs

Vue Nuxt 视频播放器

import { ref as U, onMounted as $, watchEffect as I, onBeforeUnmount as P } from "vue";
import { Utils as S } from "@vuux/utils";
const z = (e, n, p, E) => {
  const o = {
    offsetX: 0,
    offsetY: 0
  }, l = U(!1), m = (t) => {
    t.type === "touchmove" && t.cancelable && t.preventDefault();
  }, L = (t) => {
    l.value && t.stopPropagation();
  }, c = (t) => {
    document.body.addEventListener("touchmove", m, { passive: !1 });
    const X = "touches" in t ? t.touches[0].clientX : t.clientX, Y = "touches" in t ? t.touches[0].clientY : t.clientY, w = X, y = Y, { offsetX: v, offsetY: r } = o, u = e.value.getBoundingClientRect(), f = u.left, h = u.top, D = u.width, x = u.height, M = document.documentElement.clientWidth, b = document.documentElement.clientHeight, H = -f + v, T = -h + r, W = M - f - D + v, k = b - h - x + r, a = (s) => {
      l.value = !0;
      const B = v + ("touches" in s ? s.touches[0].clientX : s.clientX) - w, C = r + ("touches" in s ? s.touches[0].clientY : s.clientY) - y;
      o.offsetX = Math.min(Math.max(B, H), W), o.offsetY = Math.min(Math.max(C, T), k), e.value && (e.value.style.transitionDuration = "0s", e.value.style.transform = `translate(${o.offsetX}px, ${o.offsetY}px)`);
    }, i = async () => {
      await S.wait(50), l.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);
  }, g = () => {
    n.value && e.value && (n.value.addEventListener("mousedown", c), n.value.addEventListener("touchstart", c, { passive: !0 }));
  }, d = () => {
    n.value && e.value && (n.value.removeEventListener("mousedown", c), n.value.removeEventListener("touchstart", c));
  };
  $(() => {
    e.value?.addEventListener("click", L, { capture: !0 }), I(() => {
      p.value ? g() : d(), E.value && e.value && (o.offsetX = 0, o.offsetY = 0, e.value.style.transitionDuration = "", e.value.style.transform = "");
    });
  }), P(() => {
    d();
  });
};
export {
  z as default
};