icon

Icon 图标

组件结构

  1. <template>
  2. <viewclass="tui-icon-class tui-icon" :class="'tui-icon-'+name" :style="{ color: color, fontSize: size +'px',fontWeight:bold?'bold':'normal'}"
  3. @tap="handleClick(index)"></view>
  4. </template>

组件脚本

  1. <script>
  2. exportdefault{
  3. name:"tuiIcon",
  4. props:{
  5. name:{
  6. type:String,
  7. default:''
  8. },
  9. size:{
  10. type:Number,
  11. default:32
  12. },
  13. color:{
  14. type:String,
  15. default:''
  16. },
  17. bold:{
  18. type:Boolean,
  19. default:false
  20. },
  21. visible:{
  22. type:Boolean,
  23. default:true
  24. },
  25. index:{
  26. type:Number,
  27. default:0
  28. }
  29. },
  30. methods:{
  31. handleClick(index){
  32. this.$emit('click',{index})
  33. }
  34. }
  35. }
  36. </script>

组件样式

  1. ...此处省略n

脚本说明

  1. props:
  2. "name":图标名称,类型:"String",默认值:""
  3. "size":图标大小,类型:"Number",默认值:32px
  4. "color":图标颜色,类型:"String",默认值:""
  5. "bold":是否加粗,类型:"Boolean",默认值:false
  6. "visible":是否显示,建议直接在页面上控制,类型:"Boolean",默认值:true
  7. "index":索引,类型:"Number",默认值:0
  8. methods:
  9. "handleClick":点击事件

示例

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

grid keyboard