st-common-ui-vue3
Version:
小尾巴通用 Vue3 UI 组件库
63 lines (62 loc) • 2.72 kB
JavaScript
import { defineComponent as n, computed as i, openBlock as u, createElementBlock as h, normalizeClass as b, normalizeStyle as a, unref as r, createElementVNode as m, renderSlot as f } from "vue";
import * as o from "../../node_modules/.pnpm/st-common-ui-utils@0.1.1/node_modules/st-common-ui-utils/es/utils/el-size-util.js";
const c = /* @__PURE__ */ n({
name: "StDynamicBorder1",
__name: "StDynamicBorder1",
props: {
width: { default: "100%" },
height: { default: "100%" },
backgroundColor: { default: "#111" },
borderColorList: {},
customBorderColor: { type: Boolean, default: !1 },
borderColor: { default: "linear-gradient(135deg, #43CBFF 15%, #9708CC 100%)" },
borderWidth: { default: "2px" },
borderRadius: { default: "0.25rem" },
rotate: { type: Boolean, default: !0 },
speed: { default: "5s" },
shine: { type: Boolean, default: !1 },
shineRange: { default: "10px" },
shineBrightness: { default: 0.8 },
hover: { type: Boolean, default: !1 },
hoverPause: { type: Boolean, default: !1 }
},
setup(l) {
const d = l, t = [
"transparent 180deg",
"skyblue 360deg"
], s = i(() => !d.borderColorList || !Array.isArray(d.borderColorList) ? t : d.borderColorList);
return (e, y) => (u(), h("div", {
class: b(["st-dynamic-border-1", [
!e.hover && e.rotate ? "st-dynamic-border-1--rotate" : "",
e.hover && e.rotate ? "st-dynamic-border-1--rotate--hover" : "",
!e.hover && e.shine ? "st-dynamic-border-1--shine" : "",
e.hover && e.shine ? "st-dynamic-border-1--shine--hover" : "",
!e.hover && e.hoverPause ? "st-dynamic-border-1--hover-pause" : "",
e.hover ? e.customBorderColor ? "st-dynamic-border-1--border-color-custom--hover" : "st-dynamic-border-1--border-color-default--hover" : e.customBorderColor ? "st-dynamic-border-1--border-color-custom" : "st-dynamic-border-1--border-color-default"
]]),
style: a({
"--border-width": r(o).elSizePreHandler(e.borderWidth),
"--border-color-list": s.value.join(", "),
"--border-color": e.borderColor,
"--border-radius": r(o).elSizePreHandler(e.borderRadius),
"--speed": r(o).elSizePreHandler(e.speed, "ms"),
"--shine-range": r(o).elSizePreHandler(e.shineRange),
"--shine-brightness": e.shineBrightness,
width: r(o).elSizePreHandler(e.width),
height: r(o).elSizePreHandler(e.height)
})
}, [
m("div", {
class: "st-dynamic-border-1__content",
style: a({
backgroundColor: e.backgroundColor
})
}, [
f(e.$slots, "default", {}, void 0, !0)
], 4)
], 6));
}
});
export {
c as default
};