vuux/dist/es/ImageCompare/src/hook/useImageCompare.mjs

Vue3 Nuxt3 Nuxt4 组件库

import { ref as r, computed as L, onUnmounted as f } from "vue";
const D = (o, u, a) => {
  const i = r(o.position), s = r(!1), d = r(0), l = L(() => o.height === "auto" ? "auto" : o.height), m = () => {
    d.value += 1;
  }, t = (e) => {
    if (!s.value || !u.value)
      return;
    e.cancelable && e.preventDefault();
    const v = u.value.getBoundingClientRect(), E = (e instanceof MouseEvent ? e.clientX : e.touches[0].clientX) - v.left, c = Math.max(0, Math.min(100, E / v.width * 100));
    i.value = c, a("drag", Math.round(c));
  }, n = () => {
    s.value = !1, window.removeEventListener("mousemove", t), window.removeEventListener("touchmove", t), window.removeEventListener("mouseup", n), window.removeEventListener("touchend", n);
  }, w = (e) => {
    e.cancelable && e.preventDefault(), s.value = !0, window.addEventListener("mousemove", t), window.addEventListener("touchmove", t, { passive: !1 }), window.addEventListener("mouseup", n), window.addEventListener("touchend", n);
  }, h = () => {
    i.value = o.position, a("drag", Math.round(o.position));
  }, g = (e) => {
    i.value = Math.max(0, Math.min(100, e)), a("drag", i.value);
  };
  return f(() => {
    window.removeEventListener("mousemove", t), window.removeEventListener("touchmove", t), window.removeEventListener("mouseup", n), window.removeEventListener("touchend", n);
  }), {
    position: i,
    containerHeight: l,
    onLoad: m,
    startDrag: w,
    resetPosition: h,
    setPosition: g
  };
};
export {
  D as useImageCompare
};