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

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

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