st-common-ui-vue3
Version:
小尾巴通用 Vue3 UI 组件库
61 lines (60 loc) • 2.36 kB
JavaScript
import { defineComponent as _, computed as x, openBlock as m, createElementBlock as p, normalizeStyle as C, unref as y, renderSlot as d } from "vue";
import { randomInt_n_m as a } from "../../node_modules/.pnpm/st-common-core@0.1.1/node_modules/st-common-core/es/num/utils/random-num-util.js";
import * as j from "../../node_modules/.pnpm/st-common-ui-utils@0.1.1/node_modules/st-common-ui-utils/es/utils/el-size-util.js";
const k = {
key: 0,
class: "st-gradient-bg-2__content"
}, h = /* @__PURE__ */ _({
name: "StGradientBg2",
__name: "StGradientBg2",
props: {
bgColor: { default: "#e493d0" },
gradientColors: {},
speed: { default: "15s" },
blur: { type: Boolean, default: !0 }
},
setup(u) {
const r = u, c = [
"rgb(235, 105, 78)",
"rgb(243, 11, 164)",
"rgb(254, 234, 131)",
"rgb(170, 142, 245)",
"rgb(248, 192, 147)"
], t = x(() => {
let o = [], n = [];
return !r.gradientColors || r.gradientColors.length === 0 ? o = c : o = r.gradientColors, n = o.map((e) => {
const s = a(50, 100), l = a(50, 100), i = a(50, 100), g = a(-50, 50), v = a(-50, 50), z = a(-50, 50), $ = a(-50, 50), b = a(-50, 50), f = a(-50, 50);
return {
color: `radial-gradient(closest-side, ${e}, rgba(255, 255, 255, 0))`,
size0: `${s}vmax ${s}vmax`,
size50: `${l}vmax ${l}vmax`,
size100: `${i}vmax ${i}vmax`,
p0: `${g}vmax ${v}vmax`,
p50: `${z}vmax ${$}vmax`,
p100: `${b}vmax ${f}vmax`
};
}), n;
});
return (o, n) => (m(), p("div", {
class: "st-gradient-bg-2",
style: C({
"--size0": t.value.map((e) => e.size0).join(", "),
"--size50": t.value.map((e) => e.size50).join(", "),
"--size100": t.value.map((e) => e.size100).join(", "),
"--p0": t.value.map((e) => e.p0).join(", "),
"--p50": t.value.map((e) => e.p50).join(", "),
"--p100": t.value.map((e) => e.p100).join(", "),
backgroundColor: o.bgColor,
backgroundImage: t.value.map((e) => e.color).join(", "),
animationDuration: y(j).elSizePreHandler(o.speed, "ms")
})
}, [
o.blur ? (m(), p("div", k, [
d(o.$slots, "default", {}, void 0, !0)
])) : d(o.$slots, "default", { key: 1 }, void 0, !0)
], 4));
}
});
export {
h as default
};