images-viewer-vue3
Version:
A lightweight image viewer for Vue3
120 lines (119 loc) • 4.3 kB
JavaScript
import { defineComponent as T, mergeModels as _, inject as q, useModel as H, ref as p, computed as w, nextTick as R, openBlock as n, createElementBlock as l, createElementVNode as s, withDirectives as k, vModelText as j, normalizeClass as L, mergeProps as K, unref as a, normalizeProps as S, guardReactiveProps as W, Fragment as F, renderList as G, normalizeStyle as O, createBlock as U, createCommentVNode as E, withModifiers as A } from "vue";
import { useVirtualList as J } from "../node_modules/.pnpm/@vueuse_core@11.2.0_vue@3.4.29_typescript@5.7.2_/node_modules/@vueuse/core/index.js";
import Q from "../directive/v-lazy-image.js";
import X from "./NavLoading.vue.js";
const Y = { class: "nav-header__wrap" }, Z = ["max"], ee = ["disabled"], te = {
key: 1,
class: "error-text"
}, re = ["data-id", "onLoad", "onError", "onClick"], le = /* @__PURE__ */ T({
__name: "ScrollItemNav",
props: /* @__PURE__ */ _({
maxValue: {
type: Number,
default: 1e4,
required: !0
}
}, {
modelValue: { required: !0, default: () => 1 },
modelModifiers: {}
}),
emits: /* @__PURE__ */ _(["on-click", "on-input"], ["update:modelValue"]),
setup(v, { expose: V, emit: b }) {
const f = q("images"), g = b, h = H(v, "modelValue"), c = p(null), I = p(""), i = p(1), C = f.map((e, t) => ({
height: (t % 2 === 0, 60),
size: t % 2 === 0 ? "small" : "large",
url: e,
index: t,
isLoad: !0,
isError: !1
})), x = w(() => C.filter((e) => e.size.startsWith(I.value.toLowerCase()))), d = w(() => i.value > f.length), z = (e, t) => {
e.isLoad = !1, e.isError = !1;
}, P = (e, t) => {
e.isLoad = !1, e.isError = !0;
}, N = (e, t, o) => {
g("on-click", { evt: e, item: t, index: o });
}, { list: M, containerProps: $, wrapperProps: B, scrollTo: y } = J(
x,
{
itemHeight: (e) => x.value[e].height + 8,
overscan: 10
}
), D = (e) => {
const t = e || window.event;
["Enter", "NumpadEnter"].includes(t.code) && !d.value && u();
};
function u() {
let e = +i.value;
if (e >= 1) {
const t = e - 1;
y(t), g("on-input", t), h.value = t;
}
}
return R().then((e) => {
if (c.value) {
const t = c.value;
let o = window;
t.style.setProperty("--sider-height", `${o.innerHeight - 50}`), window.addEventListener("resize", (r) => {
o = r.target, t.style.setProperty("--sider-height", `${o.innerHeight - 50}`);
});
}
}), V({
scrollTo: y,
scrollToImage: u
}), (e, t) => (n(), l("div", {
class: "scroll-item-nav__wrapper",
ref_key: "scrollRef",
ref: c
}, [
s("div", Y, [
k(s("input", {
class: "image-index",
min: 1,
max: v.maxValue,
"onUpdate:modelValue": t[0] || (t[0] = (o) => i.value = o),
placeholder: "请输入张数",
type: "number",
onKeydown: D
}, null, 40, Z), [
[j, i.value]
]),
s("button", {
class: L(["query-btn", { "is-disabled": d.value }]),
type: "button",
onClick: u,
disabled: d.value
}, "GO", 10, ee)
]),
s("div", K({ class: "nav-scroll__wrap" }, a($)), [
s("div", S(W(a(B))), [
(n(!0), l(F, null, G(a(M), ({ index: o, data: r }) => (n(), l("div", {
key: o,
class: L(["list-group-item", { "active-item": h.value === r.index }]),
style: O({
height: `${r.height}px`,
display: "flex",
justifyContent: "center",
alignItems: "center"
})
}, [
r.isLoad ? (n(), U(X, { key: 0 })) : E("", !0),
r.isError ? (n(), l("span", te, "加载失败")) : E("", !0),
k(s("img", {
class: "list-group-image",
"data-id": r.index,
alt: "picture",
onLoad: (m) => z(r),
onError: (m) => P(r),
onClick: A((m) => N(m, r, o), ["stop", "prevent"])
}, null, 40, re), [
[a(Q), r.url]
])
], 6))), 128))
], 16)
], 16)
], 512));
}
});
export {
le as default
};