mine-h5-ui/es/MeSwiper/index.vue.js

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

import { defineComponent as x, openBlock as n, createElementBlock as s, withModifiers as f, unref as e, normalizeStyle as c, normalizeClass as r, createElementVNode as C, renderSlot as N, Fragment as V, renderList as z, createCommentVNode as D } from "vue";
import { useHandMove as E, useStyle as $ } from "./hooks.js";
const A = {
  key: 0,
  class: "dot"
}, I = /* @__PURE__ */ x({
  name: "MeSwiper",
  __name: "index",
  props: {
    loop: { type: Boolean, default: !1 },
    delay: { default: 3e3 },
    height: {},
    dot: { type: Boolean, default: !1 },
    radius: { default: 4 }
  },
  emits: ["change"],
  setup(l, { emit: y }) {
    const v = y, a = l, { swiperDom: w, dots: T, dotIndex: k, currentValue: M, isActive: S, onTouchstart: d, onTouchmove: u, onTouchend: i, onMousedown: m } = E(a, v), { className: g, renderStyle: h } = $(a);
    return (B, o) => (n(), s("div", {
      ref_key: "swiperDom",
      ref: w,
      class: r(["me-swiper", e(g)]),
      style: c(e(h)),
      onTouchstart: o[0] || (o[0] = f(
        //@ts-ignore
        (...t) => e(d) && e(d)(...t),
        ["prevent"]
      )),
      onTouchmove: o[1] || (o[1] = //@ts-ignore
      (...t) => e(u) && e(u)(...t)),
      onTouchend: o[2] || (o[2] = //@ts-ignore
      (...t) => e(i) && e(i)(...t)),
      onMousedown: o[3] || (o[3] = f(
        //@ts-ignore
        (...t) => e(m) && e(m)(...t),
        ["prevent"]
      ))
    }, [
      C("div", {
        class: r(["imgs", { active: e(S) }]),
        style: c(`transform:translateX(${e(M)}px);`)
      }, [
        N(B.$slots, "default")
      ], 6),
      l.dot ? (n(), s("ul", A, [
        (n(!0), s(V, null, z(e(T), (t, p) => (n(), s("li", {
          key: p,
          class: r({ on: e(k) === p })
        }, null, 2))), 128))
      ])) : D("", !0)
    ], 38));
  }
});
export {
  I as default
};