vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
35 lines (34 loc) • 978 B
JavaScript
import { computed as i, ref as m } from "vue";
const d = (e) => {
const t = i(() => ({
"--image-group-gap": e.gap + "px",
"--image-group-width": e.size + "px",
"--image-group-height": e.size + "px",
"--image-group-border": e.border + "px"
})), l = i(() => e.max > 0 && e.src.length > e.max ? e.src.slice(0, e.max - 1) : e.src), n = i(() => e.max > 0 && e.src.length > e.max), c = i(() => n.value ? e.src[e.max - 1] : ""), a = m({
visible: !1,
index: 0
});
return {
customStyle: t,
normalImages: l,
last: n,
lastImage: c,
preview: a,
openPreview: (g) => {
a.value = { visible: !0, index: g };
},
closePreview: () => {
a.value.visible = !1;
},
prevImage: () => {
a.value.index > 0 ? a.value.index-- : a.value.index = e.src.length - 1;
},
nextImage: () => {
a.value.index < e.src.length - 1 ? a.value.index++ : a.value.index = 0;
}
};
};
export {
d as useImageGroup
};