Badge 徽章
出现在按钮、图标旁的数字或状态标记。
基础用法
展示新消息数量。
使用 value 设置展示内容，支持 Number 或 String。
12
3
1
2
1
Click Me
最大值
可自定义封顶数字。
通过数字类型的 max 设置最大值；注意仅在 value 为数字时生效。
99+
10+
自定义内容
可展示数字以外的文本，或使用 content 插槽自定义。
value 为字符串时可展示自定义文本，也可使用 content 插槽。
new
hot
99
小红点
用小红点标记需要引起注意的内容。
设置布尔属性 is-dot。
query
偏移量
设置徽标偏移，格式为 [left, top]，表示相对默认位置向左、向上的偏移。
1
业务待处理
徽标位置
支持在不改变默认角标行为的前提下，将徽标显示在内容左侧或右侧并垂直居中。
使用 position 设置位置：default（默认角标）、left-center（左侧垂直居中）、right-center（右侧垂直居中）。在左右居中模式下，徽标与内容间距为 4px。
8
8
8
徽章 API
徽章 属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 显示值 | string / number | '' |
| max | 最大值，超出后显示 {max}+；仅当 value 为数字时生效 | number | 99 |
| is-dot | 是否显示小圆点 | boolean | false |
| hidden | 是否隐藏徽章 | boolean | false |
| type | 类型 | enum | danger |
| show-zero | 值为 0 时是否仍显示徽章 | boolean | true |
| color | 圆点背景色 | string | |
| offset | 徽标偏移 | array | [0, 0] |
| position | 徽标位置，支持默认角标、左侧居中、右侧居中 | enum | default |
| badge-style | 自定义徽标样式 | object | — |
| badge-class | 自定义徽标类名 | string | — |
徽章 插槽
| 名称 | 说明 |
|---|---|
| default | 自定义默认内容 |
| content | 自定义徽标内容 |