vue制作ICON下拉框选择器。

vue使用iview组件库的select结合iconfont实现下拉框选择icon图标

一、引用iconfont

这里参考的是前端李小白的博客，可以进去看看，还是很详细的。

二、封装选择器

将下拉框单独封装成组件。这里不管是iview还是elementUi的组件库，实现原理都是一样的。主要过程是将下拉框的option替换成icon图标，然后选择后回显到下拉框中，再结合调用组件进行父子组件双向数据绑定。
HTML代码：

 <z-select v-model="value" @on-change="changeIcon" :transfer="true" placeholder=" ">
    <template #prefix><div  class="prefix"><icon-svg :icon-class="value"/></div></template>
    <z-option class="optionBox1" v-for="(item,key) in iconList" :value="item.icon" :key="key">
      <icon-svg :icon-class="item.icon"/>
    </z-option>
  </z-select>

这里回显用的最关键的地方就是template #prefix，这是一个下拉框插槽，展示select容器头部内容。
"icon-svg"标签就是封装后的iconfont调用。

JS代码：

export default {
  name: 'iconSelect',
  data () {
    return {
      iconList: []
    }
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.iconList = [ // 菜单的icon
        {name: '系统管理', icon: 'a-xitongguanli-011'},
        {name: '首页', icon: 'shouye'},
        {name: '基础配置', icon: 'jichupeizhi'},
        {name: '销售管理', icon: 'xiaoshouguanli'},
        {name: '财务管理', icon: 'caiwuguanli'},
      ]
    },
    changeIcon (data) {
      this.$emit('input', data)
    }
  }
}

这里还是比较简单易懂的，主要是用了v-model方式的一个双向数据绑定，通过$emit将选择的值返给父组件，父组件传的值默认是value，通过props接收一下。v-model 实际上就是 $emit(‘input’) 以及 props:value 的组合语法糖

父组件调用：

<icon-select v-model="iconClass"></icon-select>

父组件引入组件后通过v-model绑定数据即可。

最终实现效果：