images-viewer-vue3
Version:
A lightweight image viewer for Vue3
98 lines (97 loc) • 2.86 kB
JavaScript
import { P as H } from "./utils-constant.ts-DQxBjGsQ.js";
import { d as K } from "./utils-common.ts-D9djKXpT.js";
import "./npm-hotkeys-js-CQ2lDUlP.js";
import { I as L } from "./utils-core.ts-33QG0uRn.js";
import { ref as a } from "vue";
import { a as N } from "./npm-@vueuse-core-Bnn_IJkP.js";
import { u as q } from "./hooks-useNaiveDiscrete.ts-DBT1kttU.js";
const { message: D } = q(), te = (s, I) => {
const i = a(null), e = a(null), l = a(""), u = a(!0), o = L.getInStance(), n = a(-1), p = a(-1), v = a(""), m = a({
naturalRatio: "",
size: "",
type: ""
}), y = a(s.length > 0), x = document.querySelector(`.${H}`), { isSupported: h, isFullscreen: w, enter: S, exit: R, toggle: M } = N(x);
function z(t) {
o.horizontalInvert();
}
function W(t) {
o.verticalInvert();
}
function E(t) {
o.zoomIn();
}
function P(t) {
o.zoomOut();
}
function V(t) {
o.rotate("+");
}
function O(t) {
o.rotate("-");
}
const $ = (t) => {
o.onWheel(t);
}, C = (t) => {
var c;
const r = (c = e.value) == null ? void 0 : c.src;
K(r);
}, F = () => {
i.value = null, e.value = null, l.value = "", u.value = !0, n.value = -1, p.value = -1, o.destroyed();
}, T = () => {
o.removeStyleProperty();
}, _ = async (t) => {
o.setImage(e.value);
const r = new Image();
r.src = e.value && e.value.src, r.onload = async () => {
const { width: c, height: X, naturalWidth: g, naturalHeight: d } = r, B = Number(g * d / 1024).toFixed(2);
m.value = {
naturalRatio: `${g} x ${d} px`,
size: `${B} KB`
};
}, e.value && i.value && (e.value.style.transform = "", e.value.style.removeProperty("position"), e.value.style.maxHeight = "100%", e.value.style.maxWidth = "100%"), l.value = "", u.value = !1;
}, b = (t) => {
u.value = !1, l.value = "加载图片失败，请仔细检测图片访问路径！";
}, k = () => {
n.value !== s.length - 1 && (n.value++, f());
}, A = () => {
n.value !== 0 && (n.value--, f());
}, f = () => {
if (!e.value) return;
const t = s[n.value];
t && (v.value = e.value.src = t, I({ image: e.value.src, index: n.value }));
};
return {
updateImageSrc: v,
isMultipleImage: y,
onWheelListener: $,
imageInfo: m,
nextImage: k,
previousImage: A,
destroyedExe: F,
resetStyle: T,
downloads: C,
loadImageErrorText: l,
loading: u,
errorImage: b,
loadImage: _,
imageRef: e,
imageVieverWidgetRef: i,
inevrtY: z,
inevrtX: W,
zoomIn: E,
zoomOut: P,
clockwise: V,
counterclockwise: O,
currentIndex: n,
fullScreen: async () => {
if (!h.value) {
D.warning("浏览器暂时不支持全屏预览功能");
return;
}
w.value ? await R() : await S();
}
};
};
export {
te as u
};