icon

图标。

平台差异说明

5+AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序
√√√√√√√

Tips

  • 由于 icon 组件各端表现存在差异，可以通过使用 字体图标 的方式来弥补各端差异。属性说明
属性名类型默认值说明
typeStringicon的类型
sizeNumber23icon的大小，单位px
colorColoricon的颜色，同css的color

各平台 type 有效值说明：

平台type 有效值
5+App、H5、微信小程序、QQ小程序success, success_no_circle, info, warn, waiting, cancel, download, search, clear
支付宝小程序info, warn, waiting, cancel, download, search, clear, success, success_no_circle,loading
百度小程序success, info, warn, waiting, success_no_circle, clear, search, personal, setting, top, close, cancel, download, checkboxSelected, radioSelected, radioUnselect

示例

  1. <view class="item" v-for="(value,index) in iconType" :key="index">
  2.     <icon :type="value" size="26"/>
  3.     <text>{{value}}</text>
  4. </view>
  1. export default {
  2.     data() {
  3.         return {
  4.             iconType: ['success']
  5.         }
  6.     },
  7.     onLoad() {
  8.         // #ifdef APP-PLUS|| MP-WEIXIN
  9.         this.iconType = ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search','clear']
  10.         // #endif
  11.         // #ifdef MP-ALIPAY
  12.         this.iconType = ['info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear', 'success', 'success_no_circle', 'loading']
  13.         // #endif
  14.         // #ifdef MP-BAIDU
  15.         this.iconType = ['success', 'info', 'warn', 'waiting', 'success_no_circle', 'clear', 'search', 'personal', 'setting', 'top', 'close', 'cancel', 'download', 'checkboxSelected', 'radioSelected', 'radioUnselect']
  16.         // #endif
  17.     }
  18. }

效果展示

icon - 图1icon - 图2

发现错误？想参与编辑？在 GitHub 上编辑此页面！