图标选择器

图标选择器 - 图1

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

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