st-common-ui-vue3
Version:
小尾巴通用 Vue3 UI 组件库
48 lines (47 loc) • 2.04 kB
JavaScript
import { defineComponent as u, openBlock as n, createElementBlock as o, normalizeStyle as i, unref as r, Fragment as S, renderList as y, toDisplayString as b } from "vue";
import * as a from "../../node_modules/.pnpm/st-common-ui-utils@0.1.1/node_modules/st-common-ui-utils/es/utils/el-size-util.js";
import { elSizePreHandler as s } from "../../node_modules/.pnpm/st-common-ui-utils@0.1.1/node_modules/st-common-ui-utils/es/utils/el-size-util.js";
const g = /* @__PURE__ */ u({
name: "St3DText",
__name: "St3DText",
props: {
content: {},
color: { default: "#fff" },
fontSize: { default: "3rem" },
lineHeight: { default: void 0 },
layerCnt: { default: 20 },
layerGap: { default: 1.5 },
shadow: { type: Boolean, default: !0 },
shadowSize: { default: "5px" },
base: { type: Boolean, default: !0 },
baseWidth: { default: "10px" },
baseColor: { default: "#fb7299" },
baseShadow: { type: Boolean, default: !0 },
perspective: { default: "1000px" }
},
setup(d) {
const t = d, p = (e) => t.base && e >= t.layerCnt / 2 + 1 ? s(t.baseWidth) + " " + t.baseColor : t.shadow && e >= t.layerCnt / 2 - 1 ? `${s(t.shadowSize)} rgba(0, 0, 0, 0.25)` : "none";
return (e, h) => (n(), o("div", {
class: "st-3d-text",
style: i({
"--perspective": r(a).elSizePreHandler(e.perspective),
color: e.color,
fontSize: r(a).elSizePreHandler(e.fontSize),
lineHeight: e.lineHeight ? r(a).elSizePreHandler(e.lineHeight) : r(a).elSizePreHandler(e.fontSize)
})
}, [
(n(!0), o(S, null, y(e.layerCnt, (l, f) => (n(), o("div", {
key: l,
class: "st-3d-text__layer",
style: i({
"--layer-gap": e.layerGap * -f + "px",
"-webkit-text-stroke": p(l),
textShadow: e.baseShadow && l >= t.layerCnt / 2 + 1 ? "6px 0 6px rgba(0, 0, 0, 0.25), 5px 5px 5px rgba(0, 0, 0, 0.25), 0 6px 6px rgba(0, 0, 0, 0.25)" : "none"
})
}, b(e.content), 5))), 128))
], 4));
}
});
export {
g as default
};