t-fighting-design
Version:
Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.
157 lines (156 loc) • 4.71 kB
JavaScript
import { defineComponent as F, ref as d, watch as w, openBlock as c, createElementBlock as b, unref as e, createVNode as n, withCtx as k, createElementVNode as R, normalizeStyle as B, Fragment as E, createCommentVNode as I, createBlock as P } from "vue";
import { Props as $, Emits as N } from "./index3.js";
import { FButton as u } from "../../button/index.js";
import { FToolbar as O } from "../../toolbar/index.js";
import { FToolbarItem as s } from "../../toolbar-item/index.js";
import { FPopup as M } from "../../popup/index.js";
import S from "../../_components/svg/index2.js";
import T from "../../_components/svg/index3.js";
import Z from "../../_components/svg/index5.js";
import z from "../../_components/svg/index6.js";
import A from "../../_components/svg/index9.js";
import U from "../../_components/svg/index10.js";
import j from "../../_components/svg/index15.js";
import q from "../../_components/svg/index16.js";
import { useOperationImg as D } from "../../_hooks/use-operation-img/index.js";
import "../../_hooks/use-message/index.js";
import "../../loading-bar/src/index2.js";
const G = ["src"], H = F({
name: "FImagePreview"
}), ue = /* @__PURE__ */ F({
...H,
props: $,
emits: N,
setup(C, { emit: h }) {
const t = C, { scale: y, rotate: a, smaller: V, bigger: L, onImgMousewheel: p, recovery: f } = D(), m = d(t.visible), r = d(
t.showIndex > t.imgList.length - 1 ? 0 : t.showIndex
), v = () => {
h("update:visible", !1), t.close && t.close();
};
w(
() => m.value,
(i) => {
i || v();
}
), w(
() => t.visible,
(i) => {
m.value = i;
}
);
const _ = () => {
t.imgList.forEach((o) => {
const l = new Image();
l.src = o;
});
}, g = (i) => {
f();
const o = {
next: () => {
if (r.value < t.imgList.length - 1) {
r.value++;
return;
}
r.value = 0;
},
prev: () => {
if (r.value > 0) {
r.value--;
return;
}
r.value = t.imgList.length - 1;
}
};
o[i] && o[i]();
}, x = (i) => {
const o = {
1: () => V(),
2: () => L(),
3: () => f(),
4: () => {
a.value += 90;
},
5: () => {
a.value -= 90;
}
};
o[i.key] && o[i.key]();
};
return (i, o) => (c(), b("div", {
class: "f-image-preview",
onMousewheel: o[3] || (o[3] = (...l) => e(p) && e(p)(...l))
}, [
n(e(M), {
visible: m.value,
"onUpdate:visible": o[2] || (o[2] = (l) => m.value = l),
open: _
}, {
default: k(() => [
R("img", {
class: "f-image-preview__exhibition",
draggable: "false",
src: i.imgList[r.value],
style: B({
transform: `scale(${e(y)}) rotate(${e(a)}deg)`,
borderRadius: i.round
})
}, null, 12, G),
i.imgList.length > 1 ? (c(), b(E, { key: 0 }, [
n(e(u), {
class: "f-image-preview__next",
circle: "",
"before-icon": e(T),
onClick: o[0] || (o[0] = (l) => g("next"))
}, null, 8, ["before-icon"]),
n(e(u), {
class: "f-image-preview__prev",
circle: "",
"before-icon": e(S),
onClick: o[1] || (o[1] = (l) => g("prev"))
}, null, 8, ["before-icon"])
], 64)) : I("", !0),
n(e(u), {
class: "f-image-preview__close",
circle: "",
"before-icon": e(Z),
onClick: v
}, null, 8, ["before-icon"]),
i.isOption ? (c(), P(e(O), {
key: 1,
class: "f-image-preview__option",
round: "",
onClick: x
}, {
default: k(() => [
n(e(s), {
icon: e(q),
"data-key": 1
}, null, 8, ["icon"]),
n(e(s), {
icon: e(j),
"data-key": 2
}, null, 8, ["icon"]),
n(e(s), {
icon: e(z),
"data-key": 3
}, null, 8, ["icon"]),
n(e(s), {
icon: e(U),
"data-key": 4
}, null, 8, ["icon"]),
n(e(s), {
icon: e(A),
"data-key": 5
}, null, 8, ["icon"])
]),
_: 1
})) : I("", !0)
]),
_: 1
}, 8, ["visible"])
], 32));
}
});
export {
ue as default
};