Badge 徽标数 APP

该方法或组件支持移动端小程序调用

PC

该方法或组件支持桌面端小程序调用

图标右上角的红点、数字或者文字。用于告知用户，该区域的状态变化或者待处理任务的数量。
一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。

规则

• 当用户只需知道大致有内容更新时，应该使用红点型，如：社交中的群消息通知。
• 当用户有必要知晓每条更新时，应该使用数字型。如：社交中的一对一的消息通知。

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

import { Badge } from '@21cnfe/vui'  
Vue.component('Badge', Badge)

代码演示

<Badge :text="3">Number</Badge>
<Badge :text="String">String</Badge>

<Badge :text="70" :overflowCount="55">超出封顶数字</Badge>

<Badge dot>讨嫌的小红点</Badge>

<Badge text="促" corner></Badge>
<Badge text="减" hot></Badge>
<Badge text="惠" hot></Badge>
<Badge text="免" hot></Badge>
<Badge text="反" hot></Badge>
<Badge text="hot" hot></Badge>

API