徽章
按钮和图标上的数字或状态标记。
基础用法
显示新消息的数量。
数量由 value 属性定义,该属性接受 Number 或 String 类型。
最大值
你可以自定义最大值。
最大值由属性 max 定义,它是一个 Number 类型。请注意,它仅在 value 也是 Number 类型时生效。
自定义内容
显示除数字以外的文本内容。你也可以使用 `content` 插槽来定制内容。
当 value 为 String 类型时,可以显示自定义文本。或者使用 `content` 插槽。
小红点
使用小红点标记需要引起注意的内容。
使用 `is-dot` 属性。它是一个 Boolean 类型。
偏移量 2.7.0
设置徽章点的偏移量,格式为 [left, top],表示状态点相对于默认位置的左右和上下偏移。
API
属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| value | 显示值。 | string / number | '' |
| max | 最大值,超出时显示 `max+`。仅在 value 为数字时有效。 | number | 99 |
| is-dot | 是否显示小圆点。 | boolean | false |
| hidden | 是否隐藏徽章。 | boolean | false |
| type | 徽章类型。 | 枚举 | 危险 |
| show-zero 2.6.0 | 当 value 为 0 时是否显示徽章。 | boolean | true |
| color 2.6.3 | 小圆点的背景颜色。 | string | |
| offset 2.7.0 | 徽章的偏移量。 | array | [0, 0] |
| badge-style 2.7.1 | 徽章的自定义样式。 | object | — |
| badge-class 2.7.1 | 徽章的自定义类名。 | string | — |
插槽
| 名称 | 描述 | 类型 |
|---|---|---|
| default | 自定义默认内容 | - |
| content 2.9.1 | 自定义徽章内容。 | object |