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>