Badge 徽章

介绍

徽章，可指定颜色和尺寸。

引入

import { Badge } from 'mind-ui-vue';
Vue.use(Badge);

示例

基础用法

<m-badge value="42">
  <div class="demo-badge"></div>
</m-badge>

小红点

<m-badge is-dot>
  <div class="demo-badge"></div>
</m-badge>

自定义颜色

<m-badge bgcolor="#67c23a">
  <div class="demo-badge"></div>
</m-badge>

自定义溢出值

<m-badge value="101" max="100">
  <div class="demo-badge"></div>
</m-badge>

自定义内容

<m-badge value="new">
  <div class="demo-badge"></div>
</m-badge>

配合其它组件使用

navbar 内部使用了 badge 组件，value 值对应 badge 组件的 value 值。

<m-navbar-group v-model="value">
  <m-navbar title="标签1" name="tab1" count="new" />
  <m-navbar title="标签2" name="tab2" count="8" />
  <m-navbar title="标签3" name="tab3" />
</m-navbar-group>

Api

Props

参数	说明	类型	可选值	默认值
count	显示值	Number String	—	—
max	最大值，超过最大值会显示 ${max}+，要求 value 是 Number 类型	Number	—	—
is-dot	是否显示为红色小圆点	Boolean	—	false
static	是否在文档流中显示	Boolean	—	false
bgcolor	徽章背景色	String	—	—