badge

Badge 徽章

组件结构

  1. <template>
  2.     <view class="tui-badge-class" :class="[dot?'tui-badge-dot':'tui-badge','tui-'+type, size?'tui-badge-small':'']" v-if="visible">
  3.         <slot></slot>
  4.     </view>
  5. </template>

组件脚本

  1. <script>
  2.     export default {
  3.         name: "tuiBadge",
  4.         props: {
  5.             //primary,warning,green,danger,white，black，gray
  6.             type: {
  7.                 type: String,
  8.                 default: 'primary',
  9.             },
  10.             // '', small
  11.             size: {
  12.                 type: String,
  13.                 default: '',
  14.             },
  15.             //是否是圆点
  16.             dot: {
  17.                 type: Boolean,
  18.                 default: false
  19.             },
  20.             //是否可见
  21.             visible: {
  22.                 type: Boolean,
  23.                 default: true
  24.             }
  25.         }
  26.     }
  27. </script>

组件样式

... 此处省略n行

脚本说明

 props: 
     "type" : 样式类型,可传入[primary,warning,green,danger,white，black，gray],类型:"String",默认值:"primary"    
     "size" :大小设置, 可传入['', small]， 类型:"String",默认值:''    
     "dot" :是否是圆点，不显内容,类型:"Boolean",默认值:false
     "visible":是否可见，建议直接在页面上进行控制,类型:"Boolean",默认值:true

 methods:
   无

示例

... 此处省略n行,下载源码查看