仅桌面端保证样式
Badge 徽标
出现在按钮、图标、头像等元素右上角的徽标:value 展示数字或文本,max 超限显示 max+,is-dot 退化为小红点,standalone 时脱离子元素作为行内标签独立使用。value 为空且非红点时不渲染。
基础用法
数值型 value 超过 max 时截断为 max+;字符串 value 原样展示;hidden 为 true 时整体隐藏。
12
99+
new
类型与独立使用
type 更换底色(默认 danger 红);standalone 时不包裹子元素,徽标作为行内元素独立渲染,适合直接排在文本后面。
8
8
8
8
hot
notice
红点配色
红点模式(is-dot,忽略 value)同样受 type 影响,可用于不同优先级的提醒。
组合图标与头像
default 插槽可包裹任意元素,徽标自动定位到其右上角。
荐
动态显隐
hidden 受控切换,徽标隐藏时子元素布局不受影响。
8
API
Badge Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 显示值,数字超过 max 时截断为 max+;为空且非红点时不渲染 | string | number | |
| max | 最大值,超出显示 max+(仅数值型 value 生效) | number | — |
| isDot | 小红点(忽略 value) | boolean | false |
| hidden | 隐藏徽标 | boolean | false |
| type | 底色类型 | primary | success | warning | info | danger | danger |
| standalone | 独立使用,不定位到子元素右上角 | boolean | false |
Badge Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| default | 被包裹的子元素(徽标定位其右上角;standalone 时不需要) | — | — |