徽章

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

基础用法

显示新消息的数量。

数量由 value 属性定义,该属性接受 Number 或 String 类型。

12
3
1
2
1

最大值

你可以自定义最大值。

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

99+
10+

自定义内容

显示除数字以外的文本内容。你也可以使用 `content` 插槽来定制内容。

当 value 为 String 类型时,可以显示自定义文本。或者使用 `content` 插槽。

99

小红点

使用小红点标记需要引起注意的内容。

使用 `is-dot` 属性。它是一个 Boolean 类型。

查询

偏移量 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当 value 为 0 时是否显示徽章。booleantrue
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

来源

组件样式文档

贡献者