vue 图标选择器 引用本地选择器

### 创建和使用自定义本地图标选择器 #### 1. 准备工作 为了在 Vue 项目中创建并使用自定义的本地图标选择器组件，首先需要准备一些基础设置。这包括安装必要的依赖项以及配置全局样式。 对于基于 Element Plus 的项目来说，在 `main.js` 或者 `main.ts` 文件里确保已经正确引入了 Element Plus 及其图标资源： ```javascript import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' const app = createApp(App) app.use(ElementPlus) app.mount('#app') ``` #### 2. 封装图标选择器组件 接下来是构建核心部分——图标选择器组件 (`ChooseIcon.vue`)。该组件负责展示所有可用的本地 SVG 图标，并允许用户从中挑选所需的一个作为选中的图标。 ```html <template> <div class="icon-selector"> <input type="text" placeholder="Search Icons..." v-model="searchQuery"/> <ul> <li v-for="(item, index) in filteredIcons" :key="index" @click="select(item)"> <svg-icon :name="item"></svg-icon>{{ item }} </li> </ul> </div> </template> <script setup lang="ts"> import { ref, computed } from 'vue'; import SvgIcon from '@/components/SvgIcon.vue'; interface Props { modelValue?: string; } const props = withDefaults(defineProps<Props>(), { modelValue: '' }); const emit = defineEmits(['update:modelValue']); let allIcons = ['home', 'user', 'setting']; // 假设这是所有的图标名称列表[^1] const searchQuery = ref(''); const select = (value:string) => { emit('update:modelValue', value); }; const filteredIcons = computed(() => allIcons.filter((i) => i.includes(searchQuery.value)) ); </script> <style scoped> /* 添加适当样式 */ .icon-selector input, .icon-selector ul li{ padding:8px; } .icon-selector ul li:hover{ background-color:#f0f0f0; cursor:pointer; } </style> ``` 这段代码实现了基本的功能需求：通过输入框可以过滤显示特定关键词开头的图标；点击某个图标会触发事件更新父级传来的绑定属性值。 #### 3. 使用图标选择器组件 最后一步是在实际页面上应用这个新创建好的图标选择器组件。假设在一个表单字段内想要让用户能够方便地选取一个图标来代表某条记录，则可以在对应的模板文件中这样写： ```html <el-form-item label="菜单图标" prop="icon"> <choose-icon v-model="formMsg.icon"></choose-icon> </el-form-item> ``` 这里假定外部有一个响应式的对象 `formMsg` 来保存当前编辑的数据模型，其中就包含了待赋值给图标的成员变量 `icon`[^5]。