t-fighting-design
Version:
Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.
50 lines (49 loc) • 1.54 kB
JavaScript
import { defineComponent as p, ref as C, computed as c, openBlock as n, createElementBlock as a, normalizeStyle as l, unref as d, Fragment as y, renderList as k, normalizeClass as v, toDisplayString as L, createCommentVNode as E } from "vue";
import { Props as w } from "./index3.js";
import { isString as z, sizeChange as u } from "../../_utils/index3.js";
const I = ["onClick"], S = p({
name: "FExpandCard"
}), A = /* @__PURE__ */ p({
...S,
props: w,
setup(m) {
const r = m, i = C(r.expandIndex), _ = (e) => {
i.value = e;
}, f = (e) => {
if (e === i.value)
return "f-expand-card__active";
}, x = c(() => {
const { round: e } = r;
return ["f-expand-card__item", { "f-expand-card__round": e }];
}), h = c(() => {
const { imageList: e } = r;
return e.map((t) => z(t) ? { url: t } : t);
}), g = c(() => {
const { width: e, height: t } = r;
return {
width: u(e),
height: u(t)
};
});
return (e, t) => (n(), a("div", {
class: "f-expand-card",
style: l(d(g))
}, [
(n(!0), a(y, null, k(d(h), (o, s) => (n(), a("div", {
key: s,
class: v([f(s), ...d(x)]),
style: l({ backgroundImage: `url(${o.url})` }),
onClick: (B) => _(s)
}, [
o.text ? (n(), a("h3", {
key: 0,
class: "f-expand-card__title",
style: l({ color: e.color })
}, L(o.text), 5)) : E("", !0)
], 14, I))), 128))
], 4));
}
});
export {
A as default
};