Badge 徽章 ​

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

基础用法 ​

可以用来展示新消息的数量。

数量值可接受 Number 或 String。

12
3
1
2
1

最大值 ​

你还可以自定义最大值

由 max 属性定义，接受 Number 值。 请注意，仅在值也是 Number 时起作用。

99+
10+

自定义显示内容 ​

你也可以展示除数字以外你想要展示的任何值。

当 value 是 String 时，可以显示自定义文字。

new
hot

小红点 ​

通过一个小红点标记来告知用户有新内容。

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

query

偏移量 2.7.0 ​

设置徽章点的偏移，格式是[左，顶部]， 代表状态点从左侧和默认位置顶部的偏移。

1

API ​

Attributes ​

属性名说明类型默认值
value显示值string / number''
max最大值，超过最大值会显示 {max}+。 只有当 value 是数字类型时起作用。number99
is-dot是否显示小圆点。booleanfalse
hidden是否隐藏 Badge。booleanfalse
typebadge type.enumdanger
show-zero 2.6.0值为零时是否显示 Badgebooleantrue
color 2.6.3背景色string
offset 2.7.0badge 的偏移量[ number , number ]—
badge-style 2.7.1自定义 badge 样式object—
badge-class 2.7.1自定义 badge 类名string—

Slots ​

插槽名说明
default自定义默认内容

源代码 ​

组件 • 样式 • 文档

贡献者 ​