badge

Badge 徽章

组件结构

  1. <template>
  2. <viewclass="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. exportdefault{
  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行,下载源码查看