@cqmcui/cqmcui
Version:
轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
97 lines (96 loc) • 2.58 kB
JavaScript
import { reactive, computed, openBlock, createElementBlock, withDirectives, createElementVNode, normalizeStyle, renderSlot, vShow, toDisplayString, normalizeClass } from "vue";
import { c as createComponent } from "./component-81a4c1d0.js";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
const { create } = createComponent("badge");
const _sfc_main = create({
props: {
value: {
type: [String, Number]
},
max: {
type: Number,
default: 1e4
},
dot: {
type: Boolean,
default: false
},
bubble: {
type: Boolean,
default: false
},
hidden: {
type: Boolean,
default: false
},
top: {
type: String,
default: "0"
},
right: {
type: String,
default: "0"
},
zIndex: {
type: Number,
default: 9
},
color: {
type: String,
default: ""
}
},
setup(props) {
const state = reactive({});
const stl = computed(() => {
return {
top: `${props.top}px`,
right: `${props.right}px`,
zIndex: props.zIndex,
background: props.color
};
});
const content = computed(() => {
if (props.dot)
return;
const value = props.value;
const max = props.max;
if (typeof value === "number" && typeof max === "number") {
return max < value ? `${max}+` : value;
}
return value;
});
return {
state,
stl,
content
};
}
});
const _hoisted_1 = { class: "cqmc-badge" };
const _hoisted_2 = ["textContent"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("view", _hoisted_1, [
withDirectives(createElementVNode("view", {
class: "cqmc-badge__icon",
style: normalizeStyle(_ctx.stl)
}, [
renderSlot(_ctx.$slots, "icon")
], 4), [
[vShow, !_ctx.hidden && !_ctx.dot && _ctx.$slots.icon]
]),
renderSlot(_ctx.$slots, "default"),
withDirectives(createElementVNode("view", {
textContent: toDisplayString(_ctx.content),
class: normalizeClass(["cqmc-badge__content cqmc-badge__content--sup", { "cqmc-badge__content--dot": _ctx.dot, "cqmc-badge__content--bubble": !_ctx.dot && _ctx.bubble }]),
style: normalizeStyle(_ctx.stl)
}, null, 14, _hoisted_2), [
[vShow, !_ctx.hidden && (_ctx.content || _ctx.dot)]
])
]);
}
const Badge = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
Badge as default
};