Badge 徽章

按钮和图标上的数字或状态标记。

基础用法

显示新消息的数量。

数量由 `value` 定义,它接受 `Number` 或 `String` 类型。

12
3
1
2
1

最大值

您可以自定义最大值。

最大值由 `max` 属性定义,它是一个 `Number` 类型。请注意,它仅在 `value` 也是 `Number` 类型时才有效。

99+
10+

自定义

显示除数字之外的文本内容。或者您可以使用 `content` 插槽自定义内容。

当 `value` 是字符串时,它可以显示自定义文本。或使用 `content` 插槽。

99

红点

使用一个小红点来标记需要注意的内容。

使用 `is-dot` 属性。它是一个布尔值。

查询

偏移量 2.7.0

设置徽章标记的偏移量,格式为 `[left, top]`,表示状态点相对于默认位置的左右和上下的偏移量。

1

API

属性

名称描述类型默认值
value显示值。string / number''
max最大值,超过时显示 `{max}+`。仅当 `value` 是数字时有效。number99
is-dot是否显示一个小圆点。booleanfalse
hidden隐藏徽章。booleanfalse
type徽章类型。枚举危险
show-zero 2.6.0当值为 0 时是否显示徽章。booleantrue
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

来源

组件样式文档

贡献者