图标选择器

  1. 引入阿里巴巴的图表库后，直接使用图标名即可，记得加前缀
  2. <link rel="stylesheet" href="https://at.alicdn.com/t/font_567566_pwc3oottzol.css">

普通用法

图标选择器 - 图1

配置type为icon-select，图标集合参考例子配置iconList属性

  1. <avue-form :option="option" v-model="form" > </avue-form>
  3. <script>
  4. export default{
  5.   data() {
  6.     return {
  7.       form: { 
  8.         icon:'el-icon-error'
  9.       },
  10.       option: {
  11.         labelWidth: 120,
  12.         column: [
  13.           {
  14.             label: '图标选择器',
  15.             prop: 'icon',
  16.             type: 'icon-select',
  17.             iconList: [{
  18.               label: '基本图标',
  19.               list: ['el-icon-info', 'el-icon-error', 'el-icon-error', 'el-icon-success', 'el-icon-warning', 'el-icon-question']
  20.             },{
  21.               label: '方向图标',
  22.               list: ['el-icon-info', 'el-icon-back', 'el-icon-arrow-left', 'el-icon-arrow-down', 'el-icon-arrow-right', 'el-icon-arrow-up']
  23.             }, {
  24.               label: '符号图标',
  25.               list: ['el-icon-plus', 'el-icon-minus', 'el-icon-close', 'el-icon-check']
  26.             },{
  27.               label: '阿里云图标',
  28.               list: ['iconfont icon-zhongyingwen', 'iconfont icon-rizhi1', 'iconfont icon-bug', 'iconfont icon-qq1', 'iconfont icon-weixin1']
  29.             },]
  30.           }
  31.         ]
  32.       }
  33.     }
  34.   },
  35.   methods: {
  36.     submit() {
  37.       this.$message.success('当前数据' + JSON.stringify(this.form))
  38.     }
  39.   }
  40. }
  41. </script>