t-fighting-design
Version:
Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.
81 lines (80 loc) • 2.24 kB
JavaScript
import { defineComponent as y, ref as s, onMounted as b, computed as f, openBlock as d, createElementBlock as u, normalizeClass as p, normalizeStyle as _, unref as l, withDirectives as I, createElementVNode as h, vShow as w, renderSlot as z, toDisplayString as F } from "vue";
import { Props as D } from "./index3.js";
import { loadImage as P } from "../../_utils/index2.js";
import { sizeChange as a } from "../../_utils/index3.js";
import { useFilterProps as C } from "../../_hooks/use-filter-props/index.js";
import "../../_hooks/use-message/index.js";
import "../../loading-bar/src/index2.js";
const A = ["draggable", "referrer-policy", "alt", "title"], B = {
key: 1,
class: "f-image__error"
}, E = { class: "f-image__error-text" }, L = y({
name: "FImage"
}), H = /* @__PURE__ */ y({
...L,
props: D,
setup(v) {
const o = v, i = s(!0), n = s(
null
), c = s(o.lazy), k = () => {
const e = n.value, r = (g) => {
i.value = g, c.value = g;
}, t = C(o, [
"src",
"errSrc",
"rootMargin",
"lazy",
"load",
"error"
]);
P(e, t, r);
};
b(() => {
k();
});
const S = f(() => {
const { fit: e, noSelect: r } = o;
return [
"f-image__img",
{
[`f-image__${e}`]: e,
"f-image__select": r
}
];
}), m = f(() => {
const { width: e, height: r, round: t } = o;
return {
"--f-image-width": a(e),
"--f-image-height": a(r),
"--f-image-border-radius": a(t)
};
});
return (e, r) => i.value ? (d(), u("div", {
key: 0,
role: "img",
class: p(["f-image", { "f-image__block": e.block }]),
style: _(l(m))
}, [
I(h("img", {
ref_key: "FImageImg",
ref: n,
src: "",
class: p(l(S)),
style: _(l(m)),
draggable: e.draggable,
"referrer-policy": e.referrerPolicy,
alt: e.alt,
title: e.title
}, null, 14, A), [
[w, c.value]
])
], 6)) : (d(), u("div", B, [
z(e.$slots, "error", {}, () => [
h("span", E, F(e.alt || "\u52A0\u8F7D\u5931\u8D25"), 1)
])
]));
}
});
export {
H as default
};