Mango UI

Badge 标记 pass 0.0.13+

基础用法

基础用法，value控制显示的值，hidden可以控制badge的显示与隐藏

12
3
12
12
成功
div上使用
12
12
展开查看
  <!-- 默认样式 -->
  <mg-badge :value="12">
    <mg-button :size="'mini'">badge</mg-button>
  </mg-badge>

  <!-- type属性,从第二个开始依次为 primary, warning, info, success-->
  <mg-badge :value="3" :type="'primary'">
    <mg-button :size="'mini'">primary</mg-button>
  </mg-badge>

  <!-- 第二行，在其他标签上使用-->
  <mg-badge :value="12" :type="'success'">
    <div>div上使用</div>
  </mg-badge>
  <mg-badge :value="12" :type="'success'">
    <button>按钮</button>
  </mg-badge>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

最大值

max 属性设置最大值

99+
12+
展开查看
  <mg-badge :value="100" :max="99">
    <mg-button>max</mg-button>
  </mg-badge>
  <mg-badge :value="100" :max="12">
    <mg-button>max</mg-button>
  </mg-badge>
1
2
3
4
5
6

小红点

isDot 将以一个小红点的形式展示
...当然了不一定非得是红点

展开查看
  <mg-badge :value="100" :is-dot="true">
    <mg-button>dot</mg-button>
  </mg-badge>

  <mg-badge :value="100" :is-dot="true" :type="'success'">
    <mg-button>dot</mg-button>
  </mg-badge>
1
2
3
4
5
6
7

Switch Attributes

参数说明类型可选值默认值
value显示的值string/number--
type样式类型stringprimary/ error/ info/ warning/ successerror
hidden是否显示boolean-false
max最大值number--
is-dot原点样式boolean--