vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
79 lines (78 loc) • 2.67 kB
JavaScript
import { defineComponent as x, createElementBlock as n, openBlock as t, normalizeStyle as w, unref as e, createCommentVNode as r, Fragment as z, renderList as h, createElementVNode as o, toDisplayString as B, withModifiers as c, createVNode as N, createBlock as k } from "vue";
import { useImageGroup as S } from "./hook/useImageGroup.mjs";
import { Icon as m } from "@vuux/icons";
const V = ["onClick"], E = ["src"], G = ["src"], P = { class: "image-mask" }, $ = ["src"], q = /* @__PURE__ */ x({
name: "ImageGroup",
__name: "group",
props: {
src: { default: () => [] },
size: { default: 80 },
border: { default: 4 },
gap: { default: 8 },
max: { default: 0 }
},
setup(s) {
const v = s, { customStyle: p, normalImages: f, last: C, lastImage: I, preview: u, openPreview: g, closePreview: a, prevImage: y, nextImage: b } = S(v);
return (D, l) => (t(), n("div", {
class: "app-image-group",
style: w(e(p))
}, [
(t(!0), n(z, null, h(e(f), (i, d) => (t(), n("div", {
key: d,
class: "image-item",
onClick: (F) => e(g)(d)
}, [
o("img", { src: i }, null, 8, E),
l[2] || (l[2] = o("div", { class: "is-mask" }, null, -1))
], 8, V))), 128)),
e(C) ? (t(), n("div", {
key: 0,
class: "image-item",
onClick: l[0] || (l[0] = (i) => e(g)(s.max - 1))
}, [
o("img", { src: e(I) }, null, 8, G),
o("div", P, B(s.src.length - s.max) + " +", 1)
])) : r("", !0),
e(u).visible ? (t(), n("div", {
key: 1,
class: "image-preview",
onClick: l[1] || (l[1] = c(
//@ts-ignore
(...i) => e(a) && e(a)(...i),
["self"]
))
}, [
N(e(m), {
name: "Icon9176904",
onClick: e(a),
class: "close-btn",
size: 18,
color: "rgba(255, 255, 255, 0.8)"
}, null, 8, ["onClick"]),
s.src.length > 1 ? (t(), k(e(m), {
key: 0,
name: "Icon3498333",
class: "nav-btn is-prev",
size: 22,
color: "rgba(255, 255, 255, 0.8)",
onClick: c(e(y), ["stop"])
}, null, 8, ["onClick"])) : r("", !0),
o("img", {
src: s.src[e(u).index],
class: "preview-image"
}, null, 8, $),
s.src.length > 1 ? (t(), k(e(m), {
key: 1,
name: "Icon6657361",
class: "nav-btn is-next",
size: 22,
color: "rgba(255, 255, 255, 0.8)",
onClick: c(e(b), ["stop"])
}, null, 8, ["onClick"])) : r("", !0)
])) : r("", !0)
], 4));
}
});
export {
q as default
};