epic-designer-cjh
Version:
基于vue3的设计器,可视化开发页面表单
366 lines (365 loc) • 10.5 kB
JavaScript
import { defineComponent as G, markRaw as H, ref as C, effectScope as ce, shallowRef as de, computed as k, watch as K, nextTick as fe, onMounted as me, openBlock as N, createBlock as W, Teleport as ve, createVNode as l, Transition as pe, withCtx as p, createElementVNode as d, normalizeClass as c, unref as t, normalizeStyle as Z, withModifiers as ge, createCommentVNode as y, createElementBlock as V, Fragment as j, resolveDynamicComponent as be, renderList as ke, withDirectives as we, vShow as _e, renderSlot as Ie } from "vue";
import { Q as xe, a5 as he, a6 as Ee, bs as Ce, aK as Q, bK as Ne, bL as ye, a9 as ze, af as w, aE as Oe, aI as Te, ap as Le, bM as Re, bu as Ae, bN as Ve, bO as Xe, ag as $e, aP as T, ah as E, bE as Me, aF as Ye } from "./index-97ce4605.js";
import { u as Se, c as Fe } from "./index-da336cb2.js";
import { d as Be } from "./debounce-30ba20d9.js";
var De = "Expected a function";
function X(I, z, g) {
var s = !0, f = !0;
if (typeof I != "function")
throw new TypeError(De);
return xe(g) && (s = "leading" in g ? !!g.leading : s, f = "trailing" in g ? !!g.trailing : f), Be(I, z, {
leading: s,
maxWait: z,
trailing: f
});
}
const Pe = he({
urlList: {
type: Ee(Array),
default: () => Ce([])
},
zIndex: {
type: Number
},
initialIndex: {
type: Number,
default: 0
},
infinite: {
type: Boolean,
default: !0
},
hideOnClickModal: Boolean,
teleported: Boolean,
closeOnPressEscape: {
type: Boolean,
default: !0
},
zoomRate: {
type: Number,
default: 1.2
}
}), He = {
close: () => !0,
switch: (I) => Q(I)
}, Ke = ["src"], We = G({
name: "ElImageViewer"
}), Ze = /* @__PURE__ */ G({
...We,
props: Pe,
emits: He,
setup(I, { expose: z, emit: g }) {
const s = I, f = {
CONTAIN: {
name: "contain",
icon: H(Ne)
},
ORIGINAL: {
name: "original",
icon: H(ye)
}
}, { t: U } = Se(), o = ze("image-viewer"), { nextZIndex: q } = Fe(), L = C(), $ = C([]), M = ce(), x = C(!0), b = C(s.initialIndex), O = de(f.CONTAIN), r = C({
scale: 1,
deg: 0,
offsetX: 0,
offsetY: 0,
enableTransition: !1
}), J = k(() => {
const { urlList: e } = s;
return e.length <= 1;
}), Y = k(() => b.value === 0), S = k(() => b.value === s.urlList.length - 1), ee = k(() => s.urlList[b.value]), te = k(() => [
o.e("btn"),
o.e("prev"),
o.is("disabled", !s.infinite && Y.value)
]), ae = k(() => [
o.e("btn"),
o.e("next"),
o.is("disabled", !s.infinite && S.value)
]), ne = k(() => {
const { scale: e, deg: a, offsetX: n, offsetY: i, enableTransition: m } = r.value;
let u = n / e, v = i / e;
switch (a % 360) {
case 90:
case -270:
[u, v] = [v, -u];
break;
case 180:
case -180:
[u, v] = [-u, -v];
break;
case 270:
case -90:
[u, v] = [-v, u];
break;
}
const h = {
transform: `scale(${e}) rotate(${a}deg) translate(${u}px, ${v}px)`,
transition: m ? "transform .3s" : ""
};
return O.value.name === f.CONTAIN.name && (h.maxWidth = h.maxHeight = "100%"), h;
}), se = k(() => Q(s.zIndex) ? s.zIndex : q());
function R() {
le(), g("close");
}
function oe() {
const e = X((n) => {
switch (n.code) {
case E.esc:
s.closeOnPressEscape && R();
break;
case E.space:
B();
break;
case E.left:
D();
break;
case E.up:
_("zoomIn");
break;
case E.right:
P();
break;
case E.down:
_("zoomOut");
break;
}
}), a = X((n) => {
const i = n.deltaY || n.deltaX;
_(i < 0 ? "zoomIn" : "zoomOut", {
zoomRate: s.zoomRate,
enableTransition: !1
});
});
M.run(() => {
T(document, "keydown", e), T(document, "wheel", a);
});
}
function le() {
M.stop();
}
function re() {
x.value = !1;
}
function ie(e) {
x.value = !1, e.target.alt = U("el.image.error");
}
function ue(e) {
if (x.value || e.button !== 0 || !L.value)
return;
r.value.enableTransition = !1;
const { offsetX: a, offsetY: n } = r.value, i = e.pageX, m = e.pageY, u = X((h) => {
r.value = {
...r.value,
offsetX: a + h.pageX - i,
offsetY: n + h.pageY - m
};
}), v = T(document, "mousemove", u);
T(document, "mouseup", () => {
v();
}), e.preventDefault();
}
function F() {
r.value = {
scale: 1,
deg: 0,
offsetX: 0,
offsetY: 0,
enableTransition: !1
};
}
function B() {
if (x.value)
return;
const e = Me(f), a = Object.values(f), n = O.value.name, m = (a.findIndex((u) => u.name === n) + 1) % e.length;
O.value = f[e[m]], F();
}
function A(e) {
const a = s.urlList.length;
b.value = (e + a) % a;
}
function D() {
Y.value && !s.infinite || A(b.value - 1);
}
function P() {
S.value && !s.infinite || A(b.value + 1);
}
function _(e, a = {}) {
if (x.value)
return;
const { zoomRate: n, rotateDeg: i, enableTransition: m } = {
zoomRate: s.zoomRate,
rotateDeg: 90,
enableTransition: !0,
...a
};
switch (e) {
case "zoomOut":
r.value.scale > 0.2 && (r.value.scale = Number.parseFloat((r.value.scale / n).toFixed(3)));
break;
case "zoomIn":
r.value.scale < 7 && (r.value.scale = Number.parseFloat((r.value.scale * n).toFixed(3)));
break;
case "clockwise":
r.value.deg += i;
break;
case "anticlockwise":
r.value.deg -= i;
break;
}
r.value.enableTransition = m;
}
return K(ee, () => {
fe(() => {
const e = $.value[0];
e != null && e.complete || (x.value = !0);
});
}), K(b, (e) => {
F(), g("switch", e);
}), me(() => {
var e, a;
oe(), (a = (e = L.value) == null ? void 0 : e.focus) == null || a.call(e);
}), z({
setActiveItem: A
}), (e, a) => (N(), W(ve, {
to: "body",
disabled: !e.teleported
}, [
l(pe, {
name: "viewer-fade",
appear: ""
}, {
default: p(() => [
d("div", {
ref_key: "wrapper",
ref: L,
tabindex: -1,
class: c(t(o).e("wrapper")),
style: Z({ zIndex: t(se) })
}, [
d("div", {
class: c(t(o).e("mask")),
onClick: a[0] || (a[0] = ge((n) => e.hideOnClickModal && R(), ["self"]))
}, null, 2),
y(" CLOSE "),
d("span", {
class: c([t(o).e("btn"), t(o).e("close")]),
onClick: R
}, [
l(t(w), null, {
default: p(() => [
l(t(Oe))
]),
_: 1
})
], 2),
y(" ARROW "),
t(J) ? y("v-if", !0) : (N(), V(j, { key: 0 }, [
d("span", {
class: c(t(te)),
onClick: D
}, [
l(t(w), null, {
default: p(() => [
l(t(Te))
]),
_: 1
})
], 2),
d("span", {
class: c(t(ae)),
onClick: P
}, [
l(t(w), null, {
default: p(() => [
l(t(Le))
]),
_: 1
})
], 2)
], 64)),
y(" ACTIONS "),
d("div", {
class: c([t(o).e("btn"), t(o).e("actions")])
}, [
d("div", {
class: c(t(o).e("actions__inner"))
}, [
l(t(w), {
onClick: a[1] || (a[1] = (n) => _("zoomOut"))
}, {
default: p(() => [
l(t(Re))
]),
_: 1
}),
l(t(w), {
onClick: a[2] || (a[2] = (n) => _("zoomIn"))
}, {
default: p(() => [
l(t(Ae))
]),
_: 1
}),
d("i", {
class: c(t(o).e("actions__divider"))
}, null, 2),
l(t(w), { onClick: B }, {
default: p(() => [
(N(), W(be(t(O).icon)))
]),
_: 1
}),
d("i", {
class: c(t(o).e("actions__divider"))
}, null, 2),
l(t(w), {
onClick: a[3] || (a[3] = (n) => _("anticlockwise"))
}, {
default: p(() => [
l(t(Ve))
]),
_: 1
}),
l(t(w), {
onClick: a[4] || (a[4] = (n) => _("clockwise"))
}, {
default: p(() => [
l(t(Xe))
]),
_: 1
})
], 2)
], 2),
y(" CANVAS "),
d("div", {
class: c(t(o).e("canvas"))
}, [
(N(!0), V(j, null, ke(e.urlList, (n, i) => we((N(), V("img", {
ref_for: !0,
ref: (m) => $.value[i] = m,
key: n,
src: n,
style: Z(t(ne)),
class: c(t(o).e("img")),
onLoad: re,
onError: ie,
onMousedown: ue
}, null, 46, Ke)), [
[_e, i === b.value]
])), 128))
], 2),
Ie(e.$slots, "default")
], 6)
]),
_: 3
})
], 8, ["disabled"]));
}
});
var je = /* @__PURE__ */ $e(Ze, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/image-viewer/src/image-viewer.vue"]]);
const Je = Ye(je);
export {
Je as E,
Pe as a,
He as i
};