外观
Badge 徽标数
约 1326 字大约 4 分钟
2025-10-31
该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。
基本使用
通过shape参数设置徽标形状，circle为四角均为圆角（默认），horn为左下角为直角。
<un-badge value="12" shape="horn">
<un-button text="按钮"></un-button>
</un-badge>
<un-badge value="3">
<un-button text="按钮1"></un-button>
</un-badge>
<un-badge value="21">
<un-button text="按钮1"></un-button>
</un-badge>
<un-badge value="100">
<un-button text="按钮1"></un-button>
</un-badge>
<un-badge isDot>
<un-button text="按钮1"></un-button>
</un-badge>设置徽标的类型为一个圆点
通过isDot参数设置，该形式组件没有内容，只显示一个圆点
<un-badge :isDot="true" type="success">
<un-button text="按钮"></un-button>
</un-badge>设置数字的显示方式 overflow|ellipsis|limit
overflow会根据max字段判断，超出显示${max}+ellipsis会根据max判断，超出显示${max}...limit会依据1000作为判断条件，超出1000，显示${value/1000}K，比如2.2k、3.34w，最多保留2位小数
<un-badge :value="5132" numberType="ellipsis">
<un-button text="按钮1"></un-button>
</un-badge>
<un-badge :value="110" max="99" numberType="overflow">
<un-button text="按钮1"></un-button>
</un-badge>
<un-badge :value="1500" numberType="limit">
<un-button text="按钮1"></un-button>
</un-badge>
<un-badge :value="45187" numberType="limit">
<un-button text="按钮1"></un-button>
</un-badge>自定义主题
通过type参数设置徽标主题，支持primary、warning、error、success、info五种主题。
<un-badge value="12" shape="horn" type="warning">
<un-button text="按钮"></un-button>
</un-badge>
<un-badge :value="9" type="error">
<un-button text="按钮1"></un-button>
</un-badge>
<un-badge :value="9" type="warning">
<un-button text="按钮1"></un-button>
</un-badge>
<un-badge :value="9" type="success">
<un-button text="按钮1"></un-button>
</un-badge>
<un-badge :value="9" type="primary">
<un-button text="按钮1"></un-button>
</un-badge>
<un-badge :value="9" type="warning" isDot>
<un-button text="按钮1"></un-button>
</un-badge>徽标位置
通过position参数设置徽标位置，支持top-left、top-right（默认）、bottom-left、bottom-right四种位置。
<un-badge value="12" type="warning" position="top-left">
<un-button text="按钮"></un-button>
</un-badge>
<un-badge :value="9" type="warning" position="bottom-left">
<un-button text="按钮1"></un-button>
</un-badge>
<un-badge :value="9" type="success" position="bottom-right">
<un-button text="按钮1"></un-button>
</un-badge>自定义内容
通过插槽content可以自定义徽标内容，插槽会提供value参数，可以获取当前值。
<un-badge :value="5132" numberType="ellipsis">
<un-button text="按钮1"></un-button>
<template #content>
<text style="font-size: 11px;color:#fff">new</text>
</template>
</un-badge>
<un-badge :value="110" max="99" numberType="overflow">
<un-button text="按钮1"></un-button>
<template #content>
<text style="font-size: 11px;color:#fff">hot</text>
</template>
</un-badge>
<un-badge value="99" shape="horn">
<un-button text="按钮1"></un-button>
<template #content="{ value }">
<un-icon name="chat" />
<text style="font-size: 11px;color:#fff">{{ value }}</text>
</template>
</un-badge>反转色
通过inverted参数可以反转背景和字体颜色。
<un-badge :value="9" type="error" inverted>
<un-button text="按钮1"></un-button>
</un-badge>
<un-badge :value="1532" inverted type="warning">
<un-button text="按钮1"></un-button>
</un-badge>
<un-badge :value="12" inverted type="success">
<un-button text="按钮1"></un-button>
</un-badge>
<un-badge :value="999" inverted type="primary">
<un-button text="按钮1"></un-button>
</un-badge>独立使用
徽标组件可以独立使用，不包裹在其他组件内部。
<un-badge value="12" shape="horn"></un-badge>
<un-badge value="3"></un-badge>
<un-badge value="21"></un-badge>
<un-badge value="100"></un-badge>
<un-badge isDot></un-badge>API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| isDot | 不展示数字，只有一个小点 | boolean | false |
| value | 展示的数字，大于 max 时显示为 ${max}+，为0且showZero为false时隐藏 | string | number | - |
| show | 组件是否显示 | boolean | true |
| max | 最大值，超过最大值会显示 {max}+ | string | number | 99 |
| type | 主题类型 | Enum | error |
| showZero | 当数值为 0 时，是否展示 Badge | boolean | false |
| bgColor | 背景颜色，优先级比type高，如设置，type参数会失效，支持使用主题色 | string | - |
| color | 字体颜色，支持使用主题色 | string | #ffffff |
| shape | 徽标形状，circle-四角均为圆角，horn-左下角为直角 | Enum | circle |
| numberType | 设置数字的显示方式，详细见上方文档 | Enum | overflow |
| offset | 设置badge的位置偏移，格式为 [x, y] | Array | - |
| inverted | 是否反转背景和字体颜色 | boolean | false |
| position | 徽标位置 | Enum | top-right |
| absolute | 是否使用绝对定位 | boolean | false |
| customStyle | 自定义样式 | object | string | '' |
Slots
| 插槽名 | 说明 | 参数 |
|---|---|---|
| default | 默认插槽，用于包裹需要显示徽标的元素 | - |
| content | 自定义徽标内容 | value: 当前值 |
Scss 变量
关于组件 SCSS 变量的用法，请参考 组件 SCSS 变量用法。
| 变量名 | 默认值 | 说明 |
|---|---|---|
| $un-badge-border-radius | $radius-circle | 徽标边框圆角 |
| $un-badge-padding | 0 5px | 徽标内边距 |
| $un-badge-border | 1px solid #fff | 徽标边框样式 |
| $un-badge-text-line-height | 16px | 徽标文字行高 |
| $un-badge-text-font-size | $text-sm | 徽标文字字体大小 |
| $un-badge-text-color | $text-color-inverted | 徽标文字颜色 |
| $un-badge-dot-height | 8px | 徽标圆点高度 |
| $un-badge-dot-width | 8px | 徽标圆点宽度 |
| $un-badge-inverted-line-height | $line-sm | 反转色徽标文字行高 |
| $un-badge-inverted-font-size | $text-sm | 反转色徽标文字字体大小 |
| $un-badge-inverted-color | $text-color-inverted | 反转色徽标文字颜色 |