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绑定数据即可。
最终实现效果: