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

效果

icons01