基于vue2和ant-design-vue封装的一个图标选择器
1.效果图
2.代码
iconPicker.vue
<template><div><a-popover:trigger="trigger"placement="bottomLeft"v-model="visible"><template slot="title"><a-input-searchv-model="searchValue"placeholder="输入英文关键词进行搜索"@change="filterIcon"/></template><template slot="content"><div class="icon-box"><divv-for="(item, index) in iconArr":key="item"@click="handleClick(item)"class="icon-content":style="{ background: icon === item ? '#268961' : ''}"><a-icon :type="item" style="font-size: 18px;"/><!-- <component :is="$antIcons[item]" /> --></div></div></template><slot name="iconSelect"></slot></a-popover></div></template><script>import VueIcon from '@ant-design/icons-vue'let icons = VueIcon.definitions.collectionexport default {name: "IconPicker",props:{icon:{type:String,},//自定义触发方式trigger:{type:String,default: 'click',validator: function(value) {return ['click', 'hover', 'focus'].indexOf(value) !== -1}}},data() {return {visible: false,iconArr: [],searchValue: '',theme: 'outline',iconarr: []}},mounted() {this.iconarr = Object.values(icons).filter(t => t.theme == this.theme).map(i => i.name)this.iconArr = this.iconarr;},methods: {handleClick(icon) {this.$emit('updateIcon',icon)this.visible = false;},filterIcon() {if (this.searchValue){this.iconArr = this.iconarr.filter(item => item.toLowerCase().includes(this.searchValue.toLowerCase()) )}else{this.iconArr = this.iconarr;}}},watch: {visible(val, old) {this.searchValue = ''this.iconArr = this.iconarr;}}<style scoped>.icon-box{overflow: auto;font-size: 20px;width: 250px;height: 230px;display: flex;flex-wrap: wrap;flex-direction: row;align-content: flex-start;justify-content: center;}.icon-content{width: 45px;height: 40px;margin: 5px;cursor: pointer;text-align: center;border-radius: 6px;border: 1px solid #ccc}.icon-content:hover{background: #1890ff;}</style>
使用组件（仅列出关键代码）
<icon-picker @updateIcon="(icon)=>updateIcon(icon, item.prop)"><template slot="iconSelect"><a-input v-decorator="[item.prop, {rules: item.rules}]"/></template></icon-picker>updateIcon(icon, prop){this.form.setFieldsValue({[prop]: icon})this.model && (this.model[prop] = icon)}
参考文章
/a/1190000039986392
