st-common-ui-vue3
Version:
小尾巴通用 Vue3 UI 组件库
89 lines (88 loc) • 3.31 kB
JavaScript
import { defineComponent as u, ref as d, onMounted as c, openBlock as S, createElementBlock as h, normalizeStyle as n, unref as t, createElementVNode as l, renderSlot as a, toDisplayString as g } from "vue";
import * as i from "../../node_modules/.pnpm/st-common-ui-utils@0.1.1/node_modules/st-common-ui-utils/es/utils/el-size-util.js";
import { useElementSize as f } from "../../node_modules/.pnpm/@vueuse_core@12.0.0_typescript@5.6.2/node_modules/@vueuse/core/index.js";
const p = ["src"], v = { class: "st-info-card-1__title-box" }, z = { class: "st-info-card-1__content-box" }, _ = { class: "st-info-card-1__content-box__content" }, b = /* @__PURE__ */ u({
name: "StInfoCard1",
__name: "StInfoCard1",
props: {
width: { default: "100%" },
height: { default: "auto" },
padding: { default: "1rem" },
background: { default: "#fff" },
imgSrc: { default: "" },
imgWidth: { default: "100%" },
imgHeight: { default: "100%" },
imgFillMode: { default: "cover" },
imgPosition: { default: "center" },
imgSpeed: { default: 500 },
imgDelay: { default: 0 },
title: { default: "" },
titleFontSize: { default: "1.25rem" },
content: { default: "" },
contentSpeed: { default: 500 },
contentDelay: { default: 150 }
},
setup(y) {
const o = d(), r = d(), s = d();
return c(() => {
r.value = f(o.value).width.value, s.value = f(o.value).height.value;
}), (e, m) => (S(), h("div", {
class: "st-info-card-1-container",
style: n({
"--padding": t(i).elSizePreHandler(e.padding),
"--img-width": t(i).elSizePreHandler(r.value || e.imgWidth),
"--img-height": t(i).elSizePreHandler(s.value || e.imgHeight),
"--img-speed": t(i).elSizePreHandler(e.imgSpeed, "ms"),
"--img-delay": t(i).elSizePreHandler(e.imgDelay, "ms"),
"--content-speed": t(i).elSizePreHandler(e.contentSpeed, "ms"),
"--content-delay": t(i).elSizePreHandler(e.contentDelay, "ms")
})
}, [
l("div", {
class: "st-info-card-1",
style: n({
width: t(i).elSizePreHandler(e.width),
height: t(i).elSizePreHandler(e.height),
background: e.background
})
}, [
m[0] || (m[0] = l("div", { class: "st-info-card-1__img-placeholder" }, null, -1)),
l("div", {
ref_key: "imgBoxRef",
ref: o,
class: "st-info-card-1__img-box"
}, [
a(e.$slots, "img", {}, () => [
l("img", {
class: "st-info-card-1__img-box__img",
style: n({
objectFit: e.imgFillMode,
objectPosition: e.imgPosition
}),
src: e.imgSrc,
alt: "img"
}, null, 12, p)
], !0)
], 512),
l("div", v, [
a(e.$slots, "title", {}, () => [
l("div", {
class: "st-info-card-1__title-box__title",
style: n({
fontSize: t(i).elSizePreHandler(e.titleFontSize)
})
}, g(e.title), 5)
], !0)
]),
l("div", z, [
a(e.$slots, "content", {}, () => [
l("div", _, g(e.content), 1)
], !0)
])
], 4)
], 4));
}
});
export {
b as default
};