Icons

图标

在 mpvue 框架使用 icon 组件就能实现这个功能，该组件有以下属性：

type

  • 类型：String
  • 默认值：无
  • 可选值：
    • success
    • success_no_circle
    • info
    • warn
    • waiting
    • cancel
    • download
    • search
    • clear
  • 说明：icon的类型

size

  • 类型：Number
  • 默认值：23
  • 可选值：
  • 说明：icon的类型

color

  • 类型：Color
  • 默认值：无
  • 可选值：
  • 说明：icon的颜色，同css的color

本示例是基于 mpvue 重写了官网 icon 的例子,示例代码如下：

  1. <template>
  2.   <div class="page">
  3.     <div class="group weui-flex">
  4.       <div v-for="item in iconSize">
  5.         <icon type="success" class="weui-flex__item" :size="item" />
  6.       </div>
  7.     </div>
  9.     <div class="group weui-flex">
  10.       <div v-for="item in iconType">
  11.         <icon :type="item"class="weui-flex__item" size="40" />
  12.       </div>
  13.     </div>
  15.     <div class="group weui-flex">
  16.       <div v-for="item in iconColor">
  17.         <icon type="success" class="weui-flex__item" size="40" :color="item" />
  18.       </div>
  19.     </div>
  20.   </div>
  21. </template>
  23. <script>
  24. export default {
  25.   data() {
  26.     return {
  27.       iconSize: [20, 30, 40, 50, 60, 70],
  28.       iconColor: [
  29.         'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
  30.       ],
  31.       iconType: [
  32.         'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
  33.       ]
  34.     }
  35.   },
  36.   methods: {
  37.   }
  38. }
  39. </script>
  41. <style>
  42. .group {
  43.   margin-top: 50px;
  44. }
  45. </style>

效果

icons01