• 图标选择器
    • 普通用法

    图标选择器

    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>