Badge 徽章

概述

主要用于通知未读数的角标，提醒用户点击。

使用指南

在.vue中引入组件

<script>
import iBadge from 'iview-mpvue/dist/components/badge/badge'
export default {
    components: {
        'i-badge': iBadge
    }
}
</script>

在main.js中引入样式文件

import 'iview-mpvue/dist/components/badge/style/css'

示例

<div class="container">
    <div class="demo">
        <i-badge :dot="true">
            <div class="demo-badge"></div>
        </i-badge>
    </div>
    <div class="demo">
        <i-badge count="3">
          <div class="demo-badge"></div>
        </i-badge>
    </div>
    <div class="demo">
        <i-badge count="123" overflow-count="100">
            <div class="demo-badge"></div>
        </i-badge>
    </div>
    <div class="demo">
        <i-badge count="66">
        </i-badge>
    </div>
    <div class="demo">
        <i-badge count="66" i-class-alone="demo-badge-alone">
        </i-badge>
    </div>
</div>

API

Badge properties

属性	说明	类型	默认值
i-class	自定义 class 类名	String	-
i-class-alone	自定义 alone 类名	String	-
count	显示的数字，大于 overflowCount 时，显示 ${overflowCount}+，为 0 时隐藏	Number	0
overflow-count	展示封顶的数字值	Number	99
dot	不展示数字，只有一个小红点，如需隐藏 dot ，需要设置 count 为 0	Boolean	false