mine-h5-ui/es/MeSwiper/hooks.js

一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍

import { ref as X, watch as K, provide as S, onMounted as U, onUnmounted as W } from "vue";
import { MeSwiperKey as D } from "./token.js";
/*!
          * mine-h5-ui v2.15.0
          * Copyright (c) 2025 biaov
          * @license MIT
          */
const q = (f, p) => {
  const g = X(), v = X(1), s = X(0), o = X(0), l = X(!1);
  let e = 0, u = 0, i = 0, r = 0, M;
  const m = [], T = () => {
    M = setInterval(() => {
      s.value = s.value < v.value - 1 ? s.value + 1 : 0, l.value = !0, o.value = -s.value * e;
    }, f.delay);
  }, x = () => {
    clearInterval(M);
  }, w = (n) => {
    u = o.value, l.value = !1, i = n.changedTouches[0].clientX;
  }, A = (n) => {
    const t = n.changedTouches[0].clientX - i, c = t < -e ? -e : t > e ? e : t;
    o.value = c + u;
  }, I = (n) => {
    l.value = !0;
    const t = n.changedTouches[0].clientX - i;
    if (t > 0) {
      const c = t > r ? e : 0, a = u + c;
      o.value = a > 0 ? 0 : a;
    } else if (t < 0) {
      const c = t < -r ? -e : 0, a = u + c, d = (1 - v.value) * e;
      o.value = a < d ? d : a;
    }
    s.value = -o.value / e, p("change", m[s.value - 1]);
  }, V = (n) => {
    l.value = !1;
    const t = n.clientX - i, c = t < -e ? -e : t > e ? e : t;
    o.value = c + u;
  }, y = (n) => {
    l.value = !0;
    const t = n.clientX - i;
    if (t > 0) {
      const c = t > r ? e : 0, a = u + c;
      o.value = a > 0 ? 0 : a;
    } else if (t < 0) {
      const c = t < -r ? -e : 0, a = u + c, d = (1 - v.value) * e;
      o.value = a < d ? d : a;
    }
    s.value = -o.value / e, p("change", m[s.value - 1]), document.onmousemove = null, document.onmouseup = null;
  }, N = (n) => {
    u = o.value, i = n.clientX, document.onmousemove = V, document.onmouseup = y;
  }, H = () => {
    const { offsetWidth: n } = g.value;
    e = n, r = n / 4, f.loop && T(), v.value = m.length;
  };
  return K(
    () => f.loop,
    (n) => {
      n ? T() : x();
    }
  ), S(D, { name: D, getName: (n) => {
    m.push(n);
  } }), U(H), W(x), { swiperDom: g, dots: v, dotIndex: s, currentValue: o, isActive: l, onTouchstart: w, onTouchmove: A, onTouchend: I, onMousedown: N };
};
export {
  q as useHandMove
};