vue3+element plus封装图标选择器，支持清除、过滤

1. 组件实现

<template>
  <div class="el-icon-picker_con">
    <el-popover
      v-model:visible="showPopv"
      :width="440"
      placement="bottom-start"
    >
      <template #reference>
        <el-button
          :icon="modelValue"
          class="icon_picker_btn"
          @click="showPopover"
          >{{ modelValue || '请选择图标' }}</el-button
        >
      </template>
      <div class="el-icon-picker">
        <el-input
          v-model="filterVal"
          class="filter_input"
          placeholder="输入图标查询"
          :suffix-icon="Search"
          @input="inputFilter"
        />
        <div class="icon_con">
          <component
            v-for="icon in iconList"
            :key="icon"
            class="icon"
            :class="{ icon, 'icon-active': icon == modelValue }"
            :is="icon"
            @click="chooseIcon(icon)"
          >
          </component>
        </div>
      </div>
    </el-popover>
    <el-icon
      v-if="modelValue"
      class="delete_icon"
      size="16"
      title="清除"
      @click="clearPicker"
      ><Close
    /></el-icon>
  </div>
</template>

<script setup>
import { ref, watch, getCurrentInstance } from 'vue'
import { Search } from '@element-plus/icons-vue'
const globalProperties = getCurrentInstance().appContext.config.globalProperties // 获取全局挂载

const props = defineProps({
  modelValue: {
    type: String
  }
})

let filterVal = ref('')
const emit = defineEmits(['update:modelValue'])
const showPopover = () => {
    filterVal.value = ''
    showPopv.value = true
}

let showPopv = ref(false)
const chooseIcon = (icon) => {
  emit('update:modelValue', icon)
  showPopv.value = false
}

// 图标过滤查询
let iconList = ref([])
const inputFilter = (val) => {
    if(val){
        iconList.value = globalProperties.$icons.filter((item) => item.toLowerCase().indexOf(val.toLowerCase()) !== -1)
    }else{
        iconList.value = [].concat(globalProperties.$icons)
    }
}

// 清除选中
const clearPicker = () => {
  emit('update:modelValue', '')
}

watch(
  () => showPopv.value,
  (newVal, oldVal) => {
    if(newVal){
        filterVal.value = ''
        inputFilter()
    }
  }
)

</script>

<style scoped lang="scss">
.el-icon-picker {
  height: 256px;
  overflow-y: scroll;
  //   display: flex;
  //   justify-content: space-around;
  //   flex-wrap: wrap;

  .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    color: $dark_gray;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    line-height: 45px;
    margin: 10px;
  }

  .icon:hover {
    color: var(--el-color-primary);
  }

  .icon-active {
    color: var(--el-color-primary);
  }
  .icon_picker_btn {
    float: left;
  }
  .filter_input {
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
    margin-bottom: 3px;
  }
  .icon_con {
    heigth: calc(100% - 39px);
  }
}
.el-icon-picker_con {
  .delete_icon {
    float: right;
    margin-left: 8px;
    height: 32px;
    cursor: pointer;
    visibility: hidden;
  }
  .delete_icon:hover {
    color: $errorColor;
  }
}
.el-icon-picker_con:hover {
  .delete_icon {
    visibility: visible;
  }
}
</style>

2.全局注册组件

import * as ELIcons from '@element-plus/icons-vue'

app.config.globalProperties.$icons = []
for (const [key, component] of Object.entries(ELIcons)) {
    app.config.globalProperties.$icons.push(key)
    app.component(key, component)
}

3.组件使用

<ElIconPicker v-model="addform.Icon"></ElIconPicker>

4.效果展示