1.svg組件 ``` <template> <div> <div class="mod-menu__icon-inner"> <div class="mod-menu__icon-list"> <el-button v-for="(item, index) in iconList" :key="index" @click="iconActiveHandle(item)" > <svg-icon :name="item"></svg-icon> </el-button> </div> </div> </div> </template> <script> export default { computed: { // IconSvg(){ // } }, data() { return { iconList: [ "icon-admin", "icon-bianji", "icon-config", "icon-dangdifill", "icon-daohang", ], }; }, methods: { iconActiveHandle(item) { this.$emit("iconSelect", item); }, }, }; </script> <style scoped> .svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> ``` 2.表單使用 ``` <template> <div> <el-form :model="dataForm" ref="dataForm" label-width="80px"> <el-form-item label="菜單圖標" prop="icon"> <el-row> <el-col :span="22"> <el-popover ref="iconListPopover" placement="bottom-start" trigger="click" popper-class="mod-menu__icon-popover" > <icon-svg @iconSelect="iconSelect"></icon-svg> </el-popover> <el-input v-model="dataForm.icon" v-popover:iconListPopover :readonly="true" placeholder="菜單圖標名稱" class="icon-list__input" ></el-input> </el-col> <el-col :span="2" class="icon-list__tips"> <el-tooltip placement="top" effect="light"> <div slot="content"> 文檔：<a href="https://blog.csdn.net/qq_40323256/article/details/116950679" target="_blank" >icons/index.js</a >描述 </div> <i class="el-icon-warning"></i> </el-tooltip> </el-col> </el-row> </el-form-item> </el-form> </div> </template> <script> import IconSvg from "@/components/icon-svg/index.vue"; export default { components: { IconSvg }, data() { return { dataForm: {}, }; }, methods: { // 圖標選中 iconSelect(iconName) { this.$set(this.dataForm, "icon", iconName); }, }, }; </script> <style scoped> .icon-list__input >>> .el-input__inner{ cursor: pointer ; } </style> ```