Badge 徽章
按钮和图标上的数字或状态标记。
基础用法
显示新消息的数量。
数量由 `value` 定义,它接受 `Number` 或 `String` 类型。
最大值
您可以自定义最大值。
最大值由 `max` 属性定义,它是一个 `Number` 类型。请注意,它仅在 `value` 也是 `Number` 类型时才有效。
自定义
显示除数字之外的文本内容。或者您可以使用 `content` 插槽自定义内容。
当 `value` 是字符串时,它可以显示自定义文本。或使用 `content` 插槽。
红点
使用一个小红点来标记需要注意的内容。
使用 `is-dot` 属性。它是一个布尔值。
偏移量 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 | 当值为 0 时是否显示徽章。 | boolean | true |
color 2.6.3 | 圆点的背景颜色 | string | |
offset 2.7.0 | 徽章的偏移量 | array | — |
badge-style 2.7.1 | 徽章的自定义样式 | object | — |
badge-class 2.7.1 | 徽章的自定义类名 | string | — |
插槽
名称 | 描述 | 类型 |
---|---|---|
default | 自定义默认内容 | - |
content 2.9.1 | 自定义徽章内容 | object |