fox-preview-image
Version:
一个支持 vue3 的预览图片组件
444 lines (443 loc) • 15.7 kB
JavaScript
import { createElementBlock as v, openBlock as a, createElementVNode as p, defineComponent as A, createVNode as F, computed as j, createBlock as k, createCommentVNode as w, normalizeStyle as g, toDisplayString as P, isRef as ce, toValue as ue, onBeforeMount as de, ref as m, reactive as ve, onMounted as fe, watch as K, Teleport as me, Transition as pe, withCtx as we, withKeys as xe, withModifiers as ye, unref as C, Fragment as X, renderList as he } from "vue";
function M(e) {
return Object.prototype.toString.call(e).replace(new RegExp("(^[[a-z]+ )([A-Za-z]+)(])", "g"), "$2").toLowerCase();
}
const O = /* @__PURE__ */ Object.create(null);
function ge(e) {
return M(e) === "object";
}
function be(e) {
return M(e) === "function";
}
function _e(e) {
return M(e) === "array";
}
function ke(e) {
return M(e) === "symbol";
}
function $e(e) {
return [0, void 0, null].includes(e);
}
O.isObject = ge;
O.isFunction = be;
O.isArray = _e;
O.isSymbol = ke;
O.isFalse = $e;
M.prototype = O;
const z = (e, t) => {
const o = e.__vccOpts || e;
for (const [i, s] of t)
o[i] = s;
return o;
}, Ce = {}, ze = {
viewBox: "0 0 1024 1024",
xmlns: "http://www.w3.org/2000/svg",
class: "svg",
"aria-role": "button"
};
function Le(e, t) {
return a(), v("svg", ze, t[0] || (t[0] = [
p("path", {
fill: "currentColor",
d: "M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
}, null, -1)
]));
}
const Me = /* @__PURE__ */ z(Ce, [["render", Le]]), Oe = {}, Te = {
viewBox: "0 0 1024 1024",
xmlns: "http://www.w3.org/2000/svg",
class: "svg",
"aria-role": "button"
};
function Re(e, t) {
return a(), v("svg", Te, t[0] || (t[0] = [
p("path", {
fill: "currentColor",
d: "M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
}, null, -1)
]));
}
const Y = /* @__PURE__ */ z(Oe, [["render", Re]]), Ie = { class: "fox-preview-switch" }, Be = /* @__PURE__ */ A({
__name: "switch",
emits: ["prev", "next"],
setup(e, { emit: t }) {
const o = t, i = () => {
o("prev");
}, s = () => {
o("next");
};
return (n, d) => (a(), v("div", Ie, [
p("div", {
class: "fox-preview-switch-item fox-preview-switch-item-left",
onClick: i
}, [
F(Y, { class: "preview-operate-icon preview-switch-icon-left" })
]),
p("div", {
class: "fox-preview-switch-item",
onClick: s
}, [
F(Y, { class: "fox-preview-switch-icon fox-preview-switch-icon" })
])
]));
}
}), Se = {}, Fe = {
viewBox: "0 0 1024 1024",
xmlns: "http://www.w3.org/2000/svg",
class: "svg",
"aria-role": "button"
};
function Ve(e, t) {
return a(), v("svg", Fe, t[0] || (t[0] = [
p("path", {
fill: "currentColor",
d: "m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zM352 448h256a32 32 0 0 1 0 64H352a32 32 0 0 1 0-64z"
}, null, -1)
]));
}
const Ee = /* @__PURE__ */ z(Se, [["render", Ve]]), je = {}, Ae = {
viewBox: "0 0 1024 1024",
xmlns: "http://www.w3.org/2000/svg",
class: "svg",
"aria-role": "button"
};
function De(e, t) {
return a(), v("svg", Ae, t[0] || (t[0] = [
p("path", {
fill: "currentColor",
d: "m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zm-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96z"
}, null, -1)
]));
}
const We = /* @__PURE__ */ z(je, [["render", De]]), He = {}, Ne = {
viewBox: "0 0 1024 1024",
xmlns: "http://www.w3.org/2000/svg",
class: "svg",
"aria-role": "button"
};
function Pe(e, t) {
return a(), v("svg", Ne, t[0] || (t[0] = [
p("path", {
fill: "currentColor",
d: "M289.088 296.704h92.992a32 32 0 0 1 0 64H232.96a32 32 0 0 1-32-32V179.712a32 32 0 0 1 64 0v50.56a384 384 0 0 1 643.84 282.88 384 384 0 0 1-383.936 384 384 384 0 0 1-384-384h64a320 320 0 1 0 640 0 320 320 0 0 0-555.712-216.448z"
}, null, -1)
]));
}
const Ke = /* @__PURE__ */ z(He, [["render", Pe]]), Xe = {}, Ye = {
viewBox: "0 0 1024 1024",
xmlns: "http://www.w3.org/2000/svg",
class: "svg",
"aria-role": "button"
};
function Ze(e, t) {
return a(), v("svg", Ye, t[0] || (t[0] = [
p("path", {
fill: "currentColor",
d: "M784.512 230.272v-50.56a32 32 0 1 1 64 0v149.056a32 32 0 0 1-32 32H667.52a32 32 0 1 1 0-64h92.992A320 320 0 1 0 524.8 833.152a320 320 0 0 0 320-320h64a384 384 0 0 1-384 384 384 384 0 0 1-384-384 384 384 0 0 1 643.712-282.88z"
}, null, -1)
]));
}
const Ge = /* @__PURE__ */ z(Xe, [["render", Ze]]), Ue = {}, qe = {
viewBox: "0 0 1024 1024",
xmlns: "http://www.w3.org/2000/svg",
class: "svg",
"aria-role": "button"
};
function Je(e, t) {
return a(), v("svg", qe, t[0] || (t[0] = [
p("path", {
fill: "currentColor",
d: "M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64zm384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64v450.304z"
}, null, -1)
]));
}
const Qe = /* @__PURE__ */ z(Ue, [["render", Je]]), et = { class: "fox-preview-toolbar" }, tt = /* @__PURE__ */ A({
__name: "toolbar",
props: {
scale: { default: 1 },
index: { default: "1/1" },
layout: { default: "zoomOut, zoomIn, scale, position, rotateLeft, rotateRight, download" }
},
emits: ["click"],
setup(e, { emit: t }) {
const o = e, i = t, s = (d) => {
i("click", d);
}, n = j(() => o.layout.split(",").map((d) => d.trim()));
return console.log(n), (d, c) => (a(), v("div", et, [
n.value.includes("zoomOut") ? (a(), k(Ee, {
key: 0,
role: "button",
title: "缩小",
class: "fox-preview-toolbar-item",
style: g({ order: n.value.indexOf("zoomOut") }),
onClick: c[0] || (c[0] = (r) => s("zoom-out"))
}, null, 8, ["style"])) : w("", !0),
n.value.includes("zoomIn") ? (a(), k(We, {
key: 1,
role: "button",
title: "放大",
class: "fox-preview-toolbar-item",
style: g({ order: n.value.indexOf("zoomIn") }),
onClick: c[1] || (c[1] = (r) => s("zoom-in"))
}, null, 8, ["style"])) : w("", !0),
n.value.includes("scale") ? (a(), v("div", {
key: 2,
role: "button",
title: "缩放倍数",
tabindex: "-1",
class: "fox-preview-toolbar-item fox-preview-toolbar-scale",
style: g({ order: n.value.indexOf("scale") })
}, P(o.scale), 5)) : w("", !0),
n.value.includes("position") ? (a(), v("div", {
key: 3,
role: "button",
title: "图片位置",
class: "fox-preview-toolbar-item fox-preview-toolbar-position",
style: g({ order: n.value.indexOf("position") })
}, P(o.index), 5)) : w("", !0),
n.value.includes("rotateLeft") ? (a(), k(Ke, {
key: 4,
role: "button",
title: "左旋转",
class: "fox-preview-toolbar-item",
style: g({ order: n.value.indexOf("rotateLeft") }),
onClick: c[2] || (c[2] = (r) => s("contraRotate"))
}, null, 8, ["style"])) : w("", !0),
n.value.includes("rotateRight") ? (a(), k(Ge, {
key: 5,
role: "button",
title: "右旋转",
class: "fox-preview-toolbar-item",
style: g({ order: n.value.indexOf("rotateRight") }),
onClick: c[3] || (c[3] = (r) => s("clockwiseRotation"))
}, null, 8, ["style"])) : w("", !0),
n.value.includes("download") ? (a(), k(Qe, {
key: 6,
role: "button",
title: "下载/保存",
class: "fox-preview-toolbar-item",
style: g({ order: n.value.indexOf("download") }),
onClick: c[4] || (c[4] = (r) => s("download"))
}, null, 8, ["style"])) : w("", !0)
]));
}
});
typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
const Z = () => {
};
function ot(e, t) {
function o(...i) {
return new Promise((s, n) => {
Promise.resolve(e(() => t.apply(this, i), { fn: t, thisArg: this, args: i })).then(s).catch(n);
});
}
return o;
}
function lt(...e) {
let t = 0, o, i = !0, s = Z, n, d, c, r, b;
!ce(e[0]) && typeof e[0] == "object" ? { delay: d, trailing: c = !0, leading: r = !0, rejectOnCancel: b = !1 } = e[0] : [d, c = !0, r = !0, b = !1] = e;
const x = () => {
o && (clearTimeout(o), o = void 0, s(), s = Z);
};
return (L) => {
const y = ue(d), $ = Date.now() - t, f = () => n = L();
return x(), y <= 0 ? (t = Date.now(), f()) : ($ > y && (r || !i) ? (t = Date.now(), f()) : c && (n = new Promise((_, V) => {
s = b ? V : _, o = setTimeout(() => {
t = Date.now(), i = !0, _(f()), x();
}, Math.max(0, y - $));
})), !r && !o && (o = setTimeout(() => i = !0, y)), i = !1, n);
};
}
function G(e, t = 200, o = !1, i = !0, s = !1) {
return ot(
lt(t, o, i, s),
e
);
}
const nt = (e, t) => {
const o = document.createElement("a");
o.download = t, o.href = e, o.style.display = "none", document.body.appendChild(o), o.click();
const i = setTimeout(() => {
document.body.removeChild(o), clearTimeout(i);
}, 10);
}, st = () => {
const e = document.createElement("div"), t = document.createElement("div");
e.appendChild(t), e.style.width = "100px", e.style.height = "50px", e.style.overflow = "scroll", e.style.marginLeft = "-100000px", document.body.appendChild(e);
const o = t.offsetWidth, i = e.offsetWidth, s = setTimeout(() => {
document.body.removeChild(e), clearTimeout(s);
}, 10);
return i - o;
}, at = ["onKeyup"], rt = ["src"], E = /* @__PURE__ */ A({
name: "FoxPreviewImage",
__name: "index",
props: {
modelValue: { type: Boolean, default: !1 },
src: { default: "" },
zIndex: { default: 9e3 },
initialIndex: { default: 0 },
appendTo: { default: "body" },
showToolbar: { type: Boolean, default: !0 },
enableTeleport: { type: Boolean, default: !1 },
layout: { default: "zoomOut, zoomIn, scale, position, rotateLeft, rotateRight, download" }
},
emits: ["update:modelValue"],
setup(e, { emit: t }) {
const o = e, i = t;
let s = "";
de(() => {
s = document.body.style.cssText;
});
const n = m(null), d = m(!1), c = m(0), r = o.src && o.src.length ? m(o.initialIndex) : m(0), b = m(0), x = m(1), T = m(0), L = m(0), y = m(0), $ = m(0), f = m([]);
let _ = ve({
x: 0,
y: 0
});
const V = () => {
d.value = o.modelValue;
}, D = () => {
d.value = !1, i("update:modelValue", d.value);
}, U = (l) => {
if (c.value !== 1)
return;
const { x: u, y: h } = l, R = u - _.x, S = h - _.y;
y.value = R + y.value - T.value, $.value = S + $.value - L.value, T.value = R, L.value = S;
}, W = () => {
x.value > 0.5 && (x.value -= 0.1);
}, H = () => {
x.value < 2 && (x.value += 0.1);
}, q = (l) => {
requestAnimationFrame(() => {
(l.wheelDelta || l.detail * -40) > 0 ? H() : W();
});
}, N = G(U, 10), I = G(q, 10), J = () => {
c.value = 0, T.value = 0, L.value = 0;
}, Q = (l) => {
c.value = 1, _ = { x: l.x, y: l.y };
}, ee = () => {
b.value += 90;
}, te = () => {
b.value -= 90;
}, oe = () => {
const l = f.value[r.value], u = l.split("/"), h = u[u.length - 1];
nt(l, h);
}, B = () => {
b.value = 0, x.value = 1, y.value = 0, $.value = 0, _.x = 0, _.y = 0, T.value = 0, L.value = 0;
}, le = () => {
const l = f.value.length || 0;
r.value > 0 ? r.value-- : r.value = l - 1, B();
}, ne = () => {
const l = f.value.length || 0;
r.value < l - 1 ? r.value++ : r.value = 0, B();
}, se = j(() => parseFloat(x.value.toFixed(1))), ae = j(() => `${r.value + 1}/${f.value.length}`), re = (l) => {
switch (l) {
case "zoom-out":
W();
break;
case "zoom-in":
H();
break;
case "contraRotate":
te();
break;
case "clockwiseRotation":
ee();
break;
case "download":
oe();
break;
}
};
fe(() => {
V();
});
const ie = (l) => l.scrollHeight > window.innerHeight;
return K(
() => o.modelValue,
(l) => {
d.value = l, l ? (n.value !== null && n.value.focus(), ie(document.body) && (document.body.style.paddingRight = st() + "px", document.body.classList.add("fox-lock-window"))) : (document.body.classList.remove("fox-lock-window"), s ? document.body.style.cssText = s : document.body.removeAttribute("style"));
}
), K(
() => o.src,
(l) => {
const u = M(l);
u === "string" ? (r.value = 0, B(), f.value = [l]) : u === "array" && (o.initialIndex >= 0 && o.initialIndex < l.length ? r.value = o.initialIndex : r.value = 0, B(), f.value = l);
},
{
immediate: !0
}
), (l, u) => (a(), k(me, {
to: o.appendTo,
disabled: o.enableTeleport === !1
}, [
F(pe, null, {
default: we(() => [
d.value ? (a(), v("div", {
key: 0,
role: "dialog",
ref_key: "refEl",
ref: n,
class: "fox-preview",
style: g({
"z-index": o.zIndex
}),
tabindex: "1",
onKeyup: xe(ye(D, ["exact"]), ["esc"])
}, [
p("div", {
class: "fox-preview-canvas",
onMousewheel: u[1] || (u[1] = //@ts-ignore
(...h) => C(I) && C(I)(...h)),
"on:DOMMouseScroll": u[2] || (u[2] = //@ts-ignore
(...h) => C(I) && C(I)(...h))
}, [
(a(!0), v(X, null, he(f.value, (h, R) => (a(), v(X, { key: R }, [
C(r) === R ? (a(), v("div", {
key: 0,
onMousemove: u[0] || (u[0] = //@ts-ignore
(...S) => C(N) && C(N)(...S)),
onMouseup: J,
onMousedown: Q,
style: g([{
transform: `rotate(${b.value}deg) scale(${x.value}) translate(${y.value}px,${$.value}px)`
}, { display: "inline-block" }])
}, [
p("img", {
class: "fox-preview-image",
src: h,
alt: "被拖拽的图片",
draggable: "false"
}, null, 8, rt)
], 36)) : w("", !0)
], 64))), 128))
], 32),
p("div", {
class: "fox-preview-close",
onClick: D
}, [
F(Me)
]),
f.value && f.value.length > 1 ? (a(), k(Be, {
key: 0,
onPrev: le,
onNext: ne
})) : w("", !0),
l.showToolbar ? (a(), k(tt, {
key: 1,
onClick: re,
scale: se.value,
index: ae.value,
layout: o.layout
}, null, 8, ["scale", "index", "layout"])) : w("", !0)
], 44, at)) : w("", !0)
]),
_: 1
})
], 8, ["to", "disabled"]));
}
});
E.install = (e) => {
e.component(E.name, E);
};
export {
E as default
};