• icon

    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 上编辑此页面！