Badge 组件使用教程

Badge是指通常出现在图标或文字右上角的红色圆点、数字或者文字，表示有新内容或者待处理的信息。中文一般称呼为小红点、角标或徽标。

• 强提醒的使用场景。如果只需让用户了解有更新或新内容必然只有一条时，Badge无需标注具体数字，单纯的红点即可，例如微信公众号更新和App版本更新采用无数字类型。
• 弱提醒的使用场景。如果需要让用户精确了解有多少条更新且新内容有多条，Badge可标注具体的数字，例如IM的未读消息、邮箱的未处理邮件。有数字的Badge给用户带来的心理压力会更大，也会更吸引用户注意力。
• 注意数字的长度和上限。对于有数字的Badge，由于界面显示空间有限，因此要注意视场景和信息类型决定数字最长显示多少位，如果数字达到上限该如何显示。
• 谨慎在设计图标时内运用红色圆点元素。红色小圆点这个视觉元素已经成为一种社会性语义符号，即用户看到红色小圆点就会认为这代表着有新内容，因此图标设计应当谨慎使用红色圆点。

安装

import { Badge } from 'vux'

export default {
  components: {
    Badge
  }
}

// 在入口文件全局引入

import Vue from 'vue'
import { Badge } from 'vux'

Vue.component('badge', Badge)

属性

样式变量