Skip to content

Badge 徽标 ​

用于标记数量或状态的小圆点/角标。

基础用法 ​

599+new
vue
<KbBadge :content="5"><KbButton>消息</KbButton></KbBadge>
<KbBadge :content="120" :max="99"><KbButton>邮件</KbButton></KbBadge>
<KbBadge dot><KbButton>小红点</KbButton></KbBadge>
<KbBadge :content="'new'" color="#16a34a" />

API ​

属性类型默认值说明
contentstring | number''角标内容(数字超 max 封顶为 max+)
dotbooleanfalse小红点模式(不显示文字)
maxnumber99数字封顶值
colorstring—自定义背景色

插槽 ​

名称说明
default被标记的元素(无插槽时角标独立展示)