ant-design-vue vue2图标选择器

基于vue2和ant-design-vue封装的一个图标选择器
1.效果图

2.代码
iconPicker.vue

<template>
  <div>
    <a-popover
        :trigger="trigger"
        placement="bottomLeft"
        v-model="visible"
      >
        <template slot="title">
          <a-input-search
            v-model="searchValue"
            placeholder="输入英文关键词进行搜索"
            @change="filterIcon"
          />
        </template>

        <template slot="content">
          <div class="icon-box">
            <div
              v-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.collection
export 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)
 }

参考文章

https://segmentfault.com/a/1190000039986392