vuux/dist/es/Swiper/src/hook/useSwiper.mjs

Vue3 Nuxt3 Nuxt4 组件库

import { ref as c, computed as g, watch as Y, onMounted as k, nextTick as O, onBeforeUnmount as p } from "vue";
import { normalizeSize as H } from "../utils.mjs";
const te = (n, w, a, $) => {
  const D = c(0), u = c(0), l = c(n.modelValue ?? n.initialIndex), f = c(!1), d = c(0);
  let L = 0, E = 0, x = 0, b = null;
  const i = c(!1), C = c(null);
  let y = null;
  const F = g(() => !n.loop && l.value === 0), U = g(() => !n.loop && l.value === u.value - 1), W = g(() => ({
    width: H(n.width),
    height: n.autoSize ? "auto" : H(n.height),
    position: "relative",
    overflow: "hidden",
    //防止横向滚动冲突
    touchAction: "pan-y"
  })), q = g(() => -(l.value * (D.value + n.gap)) + d.value), B = g(() => ({
    display: "flex",
    gap: `${n.gap}px`,
    transform: `translate3d(${q.value}px, 0, 0)`,
    transition: f.value ? "none" : `transform ${n.transitionDuration}ms ease`,
    willChange: "transform"
  })), N = () => n.threshold < 1 ? D.value * n.threshold : n.threshold, V = (e) => {
    if (n.loop) {
      const t = u.value;
      return (e % t + t) % t;
    }
    return Math.max(0, Math.min(e, u.value - 1));
  }, s = () => {
    n.autoSize && O(() => {
      const e = a.value;
      if (!e)
        return;
      const t = e.children.item(l.value);
      t && (C.value = t.offsetHeight);
    });
  }, S = () => {
    !w.value || !a.value || (D.value = w.value.clientWidth, u.value = a.value.children.length, s());
  }, z = (e) => {
    e && clearTimeout(e);
  }, j = () => {
    if (i.value = !0, d.value = 0, !a.value) {
      i.value = !1;
      return;
    }
    const e = () => {
      i.value = !1, a.value?.removeEventListener("transitionend", e), s();
    };
    a.value?.addEventListener("transitionend", e, { once: !0 });
    const t = window.setTimeout(() => {
      if (i.value) {
        i.value = !1;
        try {
          a.value?.removeEventListener("transitionend", e);
        } catch {
        }
        s();
      }
      z(t);
    }, n.transitionDuration + 80);
  }, v = (e) => {
    const t = V(e);
    if (t === l.value) {
      j();
      return;
    }
    if (i.value = !0, l.value = t, d.value = 0, !a.value) {
      i.value = !1, s();
      return;
    }
    const o = () => {
      i.value = !1, a.value?.removeEventListener("transitionend", o), s();
    };
    a.value?.addEventListener("transitionend", o, { once: !0 });
    const r = window.setTimeout(() => {
      if (i.value) {
        i.value = !1;
        try {
          a.value?.removeEventListener("transitionend", o);
        } catch {
        }
        s();
      }
      z(r);
    }, n.transitionDuration + 80);
  }, A = () => {
    i.value || (n.loop || l.value < u.value - 1) && v(l.value + 1);
  }, G = () => {
    i.value || (n.loop || l.value > 0) && v(l.value - 1);
  }, m = (e) => {
    if (!f.value)
      return;
    let t = 0, o = 0;
    if ("touches" in e) {
      if (e.touches.length === 0)
        return;
      t = e.touches[0].clientX, o = e.touches[0].clientY;
    } else
      t = e.clientX, o = e.clientY;
    const r = t - L, P = o - E;
    if (b || (b = Math.abs(r) > Math.abs(P) ? "h" : "v"), b === "v")
      return;
    e.cancelable && e.preventDefault(), L = t, E = o, x += r;
    const K = l.value === 0, Q = l.value === u.value - 1, Z = r > 0, _ = r < 0;
    !n.loop && (K && Z || Q && _) ? d.value += r * 0.35 : d.value += r;
  }, T = () => {
    y && (clearInterval(y), y = null);
  }, I = () => {
    !n.autoplay || u.value <= 1 || (T(), y = window.setInterval(() => {
      A();
    }, n.interval));
  }, h = () => {
    if (!f.value)
      return;
    f.value = !1;
    const e = N();
    let t = l.value;
    x > e ? t = l.value - 1 : x < -e && (t = l.value + 1), v(t), I(), window.removeEventListener("mousemove", m), window.removeEventListener("mouseup", h), window.removeEventListener("touchmove", m), window.removeEventListener("touchend", h);
  }, J = (e) => {
    if (T(), !i.value) {
      if (f.value = !0, b = null, d.value = 0, x = 0, "touches" in e) {
        const t = e.touches[0];
        L = t.clientX, E = t.clientY;
      } else
        L = e.clientX, E = e.clientY;
      window.addEventListener("mousemove", m, { passive: !1 }), window.addEventListener("mouseup", h), window.addEventListener("touchmove", m, { passive: !1 }), window.addEventListener("touchend", h);
    }
  };
  let X = null, M = null;
  return Y(
    () => n.modelValue,
    (e) => {
      typeof e == "number" && e !== l.value && v(e);
    }
  ), Y(l, (e) => $("update:modelValue", e)), k(() => {
    S(), I(), w.value && (X = new ResizeObserver(() => S()), X.observe(w.value)), a.value && (M = new MutationObserver(() => S()), M.observe(a.value, { childList: !0, subtree: !1 })), n.images && n.images.length && O(() => {
      const e = a.value?.querySelectorAll("img") || [];
      for (let t = 0; t < e.length; t++)
        e[t].addEventListener(
          "load",
          () => {
            s();
          },
          { once: !0 }
        );
    }), s();
  }), p(() => {
    T(), X?.disconnect(), M?.disconnect(), window.removeEventListener("mousemove", m), window.removeEventListener("mouseup", h), window.removeEventListener("touchmove", m), window.removeEventListener("touchend", h);
  }), {
    slidesCount: u,
    currentIndex: l,
    isDisabledPrev: F,
    isDisabledNext: U,
    containerStyles: W,
    trackStyles: B,
    goTo: v,
    next: A,
    prev: G,
    onPointerDown: J
  };
};
export {
  te as useSwiper
};