Vue3 封装 element-plus 图标选择器

<template>
  <el-popover
    ref="popoverRef"
    placement="bottom"
    width="400"
    trigger="click"
    @show="handlePopoverShow"
  >
    <template #reference>
      <el-input
        v-model="selectedIcon"
        readonly
        placeholder="请选择图标"
        @click.stop
      >
        <template #suffix>
          <i :class="selectedIcon"></i>
        </template>
      </el-input>
    </template>
    <el-scrollbar height="400px">
      <div class="icon-container">
        <div
          v-for="icon in iconsList"
          :key="icon"
          :class="icon"
          @click="selectIcon(icon)"
        ></div>
      </div>
    </el-scrollbar>
  </el-popover>
</template>
 
<script setup>
import { ref } from 'vue';
import * as Icons from '@element-plus/icons-vue';
 
const selectedIcon = ref('');
const popoverRef = ref(null);
const iconsList = Object.keys(Icons);
 
function handlePopoverShow() {
  // 当弹出层显示时的逻辑处理
}
 
function selectIcon(icon) {
  selectedIcon.value = icon;
  popoverRef.value.doClose();
}
</script>
 
<style scoped>
.icon-container {
  display: flex;
  flex-wrap: wrap;
}
.icon-container > div {
  width: 20%; /* 假设每行有5个图标 */
  cursor: pointer;
  margin: 10px;
  font-size: 24px;
}
</style>

这个代码实例展示了如何在Vue 3中使用Element Plus组件库创建一个简单的图标选择器。它使用了el-popover来封装图标选择的逻辑，并通过一个滚动条包含了所有可能的图标。用户点击输入框旁边的图标后，会显示一个下拉菜单，从中可以选择一个图标，并将其显示在输入框内。