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

Vue Nuxt 视频播放器

import { ref as l, computed as m, watch as w, onMounted as h, onUnmounted as g } from "vue";
const E = (t, c, r) => {
  const v = l(!1), u = l(c.modelValue), d = (e) => {
    if (!t.value)
      return;
    const n = t.value.getBoundingClientRect();
    let i = (e - n.left) / n.width;
    i = Math.max(0, Math.min(1, i)), u.value = i, r("update:modelValue", i), r("change", i);
  }, a = (e) => {
    let n = 0;
    e instanceof MouseEvent ? n = e.clientX : e instanceof TouchEvent && (n = e.touches[0].clientX), d(n), e.preventDefault();
  }, o = () => {
    v.value && (v.value = !1, window.removeEventListener("mousemove", a), window.removeEventListener("mouseup", o), window.removeEventListener("touchmove", a), window.removeEventListener("touchend", o));
  }, s = (e) => {
    v.value = !0, e instanceof MouseEvent ? (d(e.clientX), window.addEventListener("mousemove", a), window.addEventListener("mouseup", o)) : e instanceof TouchEvent && (d(e.touches[0].clientX), window.addEventListener("touchmove", a, { passive: !1 }), window.addEventListener("touchend", o));
  }, f = m(() => ({
    width: `${u.value * 100}%`,
    left: `${u.value * 100}%`
  }));
  return w(
    () => c.modelValue,
    (e) => {
      u.value = e;
    }
  ), h(() => {
    t.value && (t.value.addEventListener("mousedown", s), t.value.addEventListener("touchstart", s, { passive: !1 }));
  }), g(() => {
    t.value && (t.value.removeEventListener("mousedown", s), t.value.removeEventListener("touchstart", s)), o();
  }), {
    volumeStyle: f,
    startDrag: s
  };
};
export {
  E as useVolumeDrag
};