Badge 徽章
徽章组件用于显示计数、提示或状态标记，通常附加在其他元素上。
基础用法
徽章的基础用法，显示数字或文本内容。
12
3
new
最大值
可以设置最大值，超出时显示为 "{max}+"。
99
99+
999+
小圆点
使用 is-dot 属性显示小圆点徽章。
徽章类型
徽章支持多种预设类型，每种类型有不同的颜色主题。
1
2
3
4
5
自定义颜色
可以自定义徽章的背景色和文字颜色。
6
hot
位置偏移
可以设置徽章的位置偏移。
8
8
8
隐藏徽章
可以通过 hidden 属性控制徽章的显示和隐藏。
10
API
Badge Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | string | number | — | 显示值 |
| max | number | — | 最大值，超过最大值会显示 '{max}+' |
| isDot | boolean | false | 小圆点 |
| hidden | boolean | false | 隐藏徽章 |
| type | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'danger' | 徽章类型 |
| backgroundColor | string | — | 自定义背景色 |
| textColor | string | — | 自定义文字颜色 |
| offset | [number, number] | [0, 0] | 设置徽章的偏移量，格式为 [x, y] |
Badge Slots
| 插槽名 | 说明 |
|---|---|
| default | 默认内容 |