Badge 徽标

用于展示消息数量等徽标信息。

基础用法

通过 NueBadge 组件来展示徽标。

值

通过属性 value 来设置徽标显示的文字或数字。属性接受 string 和 number 两种类型的值。

<template>
    <nue-div gap="2rem">
        <nue-badge :value="100">
            <nue-button>数字</nue-button>
        </nue-badge>
        <nue-badge value="文字">
            <nue-button>文字</nue-button>
        </nue-badge>
    </nue-div>
</template>

小红点

通过属性 dot 设置徽标为小红点形式。

当 dot 属性存在时，value 属性将无效。

<template>
    <nue-badge dot>
        <nue-button>小红点</nue-button>
    </nue-badge>
</template>

隐藏与显示控制

通过 hidden 属性控制徽标是否隐藏。

<template>
    <nue-badge :hidden="visible" value="徽标">
        <nue-button @click="visible = !visible">{{ !visible ? '隐藏' : '显示' }}徽标</nue-button>
    </nue-badge>
</template>

<script setup>
import { ref } from 'vue';

const visible = ref(true);
</script>

设置上限

通过属性 max 设置徽标的最大值，当 value 超过 max 时，徽标显示 <max>+。

由于需要对 max 和 value 进行数值比较，因此所提供的 value 属性的值必须是 number 类型，否则 max 属性设置不生效。

<template>
    <nue-badge :max="99" :value="123">
        <nue-button>数字</nue-button>
    </nue-badge>
</template>

组件内使用

当 NueBadge 组件没有内容时，徽标部分将不会定位到右上角，而是水平展示。因此可以在 NueButton 以及 NueLink 等组件的内部插槽中直接使用。

<template>
    <nue-button>
        内联徽标
        <template #append>
            <nue-div align="center" gap=".25rem" style="padding-left: 1rem">
                <nue-badge dot />
                <nue-badge :max="99" :value="100" />
            </nue-div>
        </template>
    </nue-button>
</template>

注意事项

1. 最大值：max 属性仅在 value 为数值类型时生效，超过最大值显示 max+。
2. 小红点模式：dot 属性为 true 时，value 属性失效，只显示一个小红点。
3. 隐藏徽标：hidden 属性可用于控制徽标的显示隐藏。
4. 插槽内容：组件没有默认插槽内容时，徽标会水平显示；有插槽内容时，徽标会定位到右上角。

组件属性与事件

下方涵盖了 NueBadge 组件所有的可用属性与事件。

属性

属性	Type	默认值	说明
value	string | number	-	徽标显示内容
max	number	-	最大值，超过显示 max+
hidden	boolean	false	是否隐藏徽标
dot	boolean	false	小红点模式
clamped	number	-	数值位数限制
theme	string | string[] | Record<string, boolean>	-	主题样式（继承自 GlobalProps）