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行,下载源码查看