首页Vue3 封装 element-plus 图标选择器

Vue3 封装 element-plus 图标选择器

时间: 2025-01-30 21:15:12 浏览: 83

### Vue3 封装 Element Plus 图标选择器 #### 创建图标选择器组件为了创建一个可重用的图标选择器，在项目中安装 `element-plus` 和 `unplugin-icons` 插件： ```bash npm install element-plus unplugin-icons -D ``` 构建图标选择器的基础结构如下所示[^1]。 ```vue <template> <el-popover v-model:visible="visible"> <div class="icon-list">  <i :class="[selectedIcon]" @click="handleSelect(selectedIcon)" /> </div> <template #reference> <el-button>{{ selectedIcon || '请选择' }}</el-button> </template> </el-popover> </template> <script setup lang="ts"> import { ref } from "vue"; const visible = ref(false); const selectedIcon = ref(""); function handleSelect(iconName: string): void { selectedIcon.value = iconName; } </script> <style scoped> .icon-list { display: flex; flex-wrap: wrap; } .icon-list i { margin: 8px; font-size: 24px; cursor: pointer; } </style> ``` 此代码片段展示了如何利用 `Element Plus` 的弹窗组件 (`el-popover`) 来展示图标的列表，并允许用户点击来选取特定图标。当用户选择了某个图标之后，该图标名称会被存储到 `selectedIcon` 属性内。对于实际应用中的图标库支持，可以考虑引入 `@iconify/json` 或者其他类似的资源文件以获取更多的图标选项。通过遍历这些数据源，动态生成上述模板内的 `<i>` 标签内容，从而让用户能够浏览和挑选不同的图标样式。

阅读全文