icon

Icon 图标

组件结构

  1. <template>
  2.     <view class="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.     export default {
  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
  9.  methods:
  10.    "handleClick":点击事件

示例

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