vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
103 lines (102 loc) • 3.42 kB
JavaScript
import { defineComponent as P, useTemplateRef as k, createElementBlock as s, openBlock as r, normalizeStyle as v, unref as e, createCommentVNode as d, createElementVNode as u, normalizeClass as p, createVNode as g, renderSlot as T, Fragment as x, renderList as E } from "vue";
import { useSwiper as $ } from "./hook/useSwiper.mjs";
import { Icon as C } from "@vuux/icons";
const F = ["src"], L = {
key: 2,
class: "swiper-dots"
}, M = ["onClick"], A = /* @__PURE__ */ P({
name: "Swiper",
__name: "index",
props: {
modelValue: {},
width: { default: "100%" },
height: { default: "420px" },
autoSize: { type: Boolean, default: !1 },
initialIndex: { default: 0 },
transitionDuration: { default: 300 },
threshold: { default: 0.2 },
arrows: { type: Boolean, default: !0 },
dots: { type: Boolean, default: !0 },
loop: { type: Boolean, default: !0 },
images: { default: () => [] },
gap: { default: 10 },
autoplay: { type: Boolean, default: !0 },
interval: { default: 3e3 }
},
emits: ["update:modelValue"],
setup(b, { expose: B, emit: S }) {
const l = b, z = S, c = k("viewportEl"), m = k("trackEl"), { slidesCount: f, currentIndex: I, isDisabledPrev: V, isDisabledNext: _, containerStyles: D, trackStyles: N, goTo: y, next: i, prev: n, onPointerDown: a } = $(l, c, m, z);
return B({
next: i,
prev: n,
goTo: y
}), (h, o) => (r(), s("div", {
ref: "swiperEl",
class: "app-swiper",
style: v(e(D))
}, [
l.arrows ? (r(), s("div", {
key: 0,
class: p(["is-arrows is-prev", { "is-disabled": e(V) }]),
onClick: o[0] || (o[0] = //@ts-ignore
(...t) => e(n) && e(n)(...t))
}, [
g(e(C), {
name: "Icon3498333",
size: 18,
opacity: 0.8,
color: "rgba(255, 255, 255, 0.8)"
})
], 2)) : d("", !0),
u("div", {
ref_key: "viewportEl",
ref: c,
class: "swiper-viewport",
onMousedown: o[1] || (o[1] = //@ts-ignore
(...t) => e(a) && e(a)(...t)),
onTouchstartPassive: o[2] || (o[2] = //@ts-ignore
(...t) => e(a) && e(a)(...t))
}, [
u("div", {
ref_key: "trackEl",
ref: m,
class: "swiper-track",
style: v(e(N))
}, [
l.images && l.images.length ? (r(!0), s(x, { key: 0 }, E(l.images, (t, w) => (r(), s("div", {
key: w,
class: "swiper-images"
}, [
u("img", {
src: t,
draggable: "false"
}, null, 8, F)
]))), 128)) : T(h.$slots, "default", { key: 1 })
], 4)
], 544),
l.arrows ? (r(), s("div", {
key: 1,
class: p(["is-arrows is-next", { "is-disabled": e(_) }]),
onClick: o[3] || (o[3] = //@ts-ignore
(...t) => e(i) && e(i)(...t))
}, [
g(e(C), {
name: "Icon6657361",
size: 18,
opacity: 0.8,
color: "rgba(255, 255, 255, 0.8)"
})
], 2)) : d("", !0),
l.dots && e(f) > 1 ? (r(), s("div", L, [
(r(!0), s(x, null, E(e(f), (t) => (r(), s("div", {
key: t - 1,
class: p(["swiper-dot", { "is-active": e(I) === t - 1 }]),
onClick: (w) => e(y)(t - 1)
}, null, 10, M))), 128))
])) : d("", !0)
], 4));
}
});
export {
A as default
};