uv-ui/es/components/swipe/swipe.js

基于vue3的移动端组件库

import { reactive as S, watch as $, ref as y, onMounted as b, computed as O, openBlock as d, createElementBlock as f, createElementVNode as _, normalizeStyle as R, unref as m, renderSlot as z, Fragment as A, renderList as B, normalizeClass as C } from "vue";
import { nextTickFrame as F, call as L } from "../../utils/common.js";
import { useChildren as M } from "../../hooks/useContext.js";
import { useTouch as U } from "../../hooks/useTouch.js";
import "../../hooks/useCountDown.js";
import "./swipe.vue_vue_type_style_index_0_lang.js";
const V = { class: "uv-swipe-indicators" }, W = {
  name: "UvSwipe"
}, Q = /* @__PURE__ */ Object.assign(W, {
  props: {
    autoplay: {
      type: Number,
      default: 0
    },
    duration: {
      type: Number,
      default: 500
    }
  },
  emits: ["change"],
  setup(p, { emit: D }) {
    const s = p, e = S({
      activeIndex: 0,
      width: 0,
      lockDuration: !0
    });
    $(() => e.activeIndex, (t) => {
      D("change", t);
    });
    const h = y(null), { childrenNum: a, fields: n } = M("swipe", { props: s });
    b(() => {
      e.width = h.value.offsetWidth, v();
    });
    const l = O(() => a.value * e.width), r = U(), i = y(0), x = (t) => {
      e.lockDuration = !0, e.activeIndex < 0 ? (n[n.length - 1].transform = 0, e.activeIndex = a.value - 1, i.value = -e.width * (a.value - 1)) : e.activeIndex > a.value - 1 ? (n[0].transform = 0, e.activeIndex = 0, i.value = 0) : n.forEach((o) => {
        o.transform = 0;
      }), F(() => {
        e.lockDuration = !1, L(t);
      });
    };
    let w = null, u = !1;
    function T(t) {
      a.value <= 1 || (r.start(t), u = !0, X(), x(() => {
        e.lockDuration = !0;
      }), w = i.value);
    }
    function g(t) {
      if (!u)
        return;
      r.move(t);
      const { deltaX: o } = r;
      o.value < 0 && e.activeIndex === a.value - 1 ? n[0].transform = l.value : o.value > 0 && e.activeIndex === 0 && (n[n.length - 1].transform = -l.value), i.value = w + o.value;
    }
    const I = 40;
    function E(t) {
      if (!u)
        return;
      const { deltaX: o } = r;
      o.value < -I ? e.activeIndex++ : o.value > I && e.activeIndex--, u = !1, e.lockDuration = !1, i.value = -e.width * e.activeIndex, v();
    }
    const N = () => {
      r.reset(), x(() => {
        e.activeIndex === a.value - 1 && (n[0].transform = l.value), e.activeIndex++, e.lockDuration = !1, i.value = -e.width * e.activeIndex;
      });
    };
    let c = null;
    const v = () => {
      +s.autoplay > 0 && a.value > 1 && (c = setTimeout(() => {
        N(), v();
      }, +s.autoplay));
    }, X = () => {
      c && clearTimeout(c);
    };
    return (t, o) => (d(), f("div", {
      class: "uv-swipe",
      ref_key: "swiperRef",
      ref: h
    }, [
      _("div", {
        onTouchstart: T,
        onTouchmove: g,
        onTouchend: E,
        class: "uv-swipe-list",
        style: R({
          width: `${m(l)}px`,
          transform: `translateX(${i.value}px)`,
          transitionDuration: e.lockDuration ? "0ms" : `${p.duration}ms`
        })
      }, [
        z(t.$slots, "default")
      ], 36),
      _("div", V, [
        (d(!0), f(A, null, B(m(n), (j, k) => (d(), f("div", {
          key: k,
          class: C([e.activeIndex % m(a) === k ? "uv-swipe-indicators-item-active" : "", "uv-swipe-indicators-item"])
        }, null, 2))), 128))
      ])
    ], 512));
  }
});
export {
  Q as default
};