55 lines
2.8 KiB
JavaScript
55 lines
2.8 KiB
JavaScript
|
import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createCommentVNode, renderSlot } from "vue";
|
||
|
|
const withInstall = (comp) => {
|
||
|
|
const component2 = comp;
|
||
|
|
component2.install = (app) => {
|
||
|
|
app.component(component2.name, comp);
|
||
|
|
};
|
||
|
|
return component2;
|
||
|
|
};
|
||
|
|
var index = /* @__PURE__ */ (() => ".layui-badge,.layui-badge-dot,.layui-badge-rim{position:relative;display:inline-block;padding:0 6px;font-size:12px;text-align:center;background-color:#ff5722;color:#fff;border-radius:var(--global-border-radius)}.layui-badge{height:18px;line-height:18px}.layui-badge-dot{width:8px;height:8px;padding:0;border-radius:50%}.layui-badge-rim{height:18px;line-height:18px;border-width:1px;border-style:solid;background-color:#fff;border-color:var(--global-neutral-color-3);color:#666}.layui-badge-dot-ripple>span{position:absolute;top:0;left:0;width:100%;height:100%;display:block;border-radius:50%;box-sizing:border-box;animation:layui-badge-dot-anim-ripple 1.2s ease-in-out infinite}@keyframes layui-badge-dot-anim-ripple{0%{transform:scale(.8);opacity:.6}to{transform:scale(2.4);opacity:0}}.layui-btn .layui-badge,.layui-btn .layui-badge-dot{margin-left:5px}.layui-nav .layui-badge,.layui-nav .layui-badge-dot{position:absolute;top:50%;margin:-5px 6px 0}.layui-nav .layui-badge{margin-top:-10px}.layui-tab-title .layui-badge,.layui-tab-title .layui-badge-dot{left:5px;top:-2px}\n")();
|
||
|
|
const __default__ = {
|
||
|
|
name: "LayBadge"
|
||
|
|
};
|
||
|
|
const _sfc_main = defineComponent({
|
||
|
|
...__default__,
|
||
|
|
props: {
|
||
|
|
type: null,
|
||
|
|
theme: null,
|
||
|
|
color: null,
|
||
|
|
ripple: { type: Boolean }
|
||
|
|
},
|
||
|
|
setup(__props) {
|
||
|
|
const props = __props;
|
||
|
|
const classes = computed(() => {
|
||
|
|
return [
|
||
|
|
{
|
||
|
|
"layui-badge": !props.type,
|
||
|
|
"layui-badge-dot": props.type == "dot",
|
||
|
|
"layui-badge-rim": props.type == "rim",
|
||
|
|
"layui-badge-dot-ripple": props.ripple
|
||
|
|
},
|
||
|
|
`layui-bg-${props.theme}`
|
||
|
|
];
|
||
|
|
});
|
||
|
|
const styles = computed(() => {
|
||
|
|
return [props.color ? `background-color: ${props.color}` : ""];
|
||
|
|
});
|
||
|
|
return (_ctx, _cache) => {
|
||
|
|
var _a;
|
||
|
|
return openBlock(), createElementBlock("span", {
|
||
|
|
class: normalizeClass(unref(classes)),
|
||
|
|
style: normalizeStyle(unref(styles))
|
||
|
|
}, [
|
||
|
|
__props.type === "dot" ? (openBlock(), createElementBlock("span", {
|
||
|
|
key: 0,
|
||
|
|
class: normalizeClass(props.theme ? `layui-bg-${props.theme}` : ``),
|
||
|
|
style: normalizeStyle((_a = unref(styles)) != null ? _a : `background-color: #ff5722;`)
|
||
|
|
}, null, 6)) : createCommentVNode("", true),
|
||
|
|
__props.type != "dot" ? renderSlot(_ctx.$slots, "default", { key: 1 }) : createCommentVNode("", true)
|
||
|
|
], 6);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const component = withInstall(_sfc_main);
|
||
|
|
export { component as c, withInstall as w };
|