Vue3使用element-plus1.3.0版本的el-menu菜单组件引入动态渲染icon图标时，图标组件刚好是Menu时报错，菜单不显示的解决方法

目前在升级前端框架，UI组件element-plus升级到了目前最新的1.3.0beta8版本，图标也换成了官方提供的SvgIcon图标，官方提供了组件导入的方式使用图标。而我的图标是全局导入的，默认使用官方的命名。在菜单栏使用图标，并且是动态渲染的，刚好用到图标组件名称是Menu时，点击带有这个图标名称的菜单，就出问题了，导致其他菜单不显示。

下面是在main.js中全局引入图标的方法：

import {createApp} from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn';//ElementPlus 组件内部默认使用英语，使用中文语言
import 'element-plus/dist/index.css';
import * as ElIconModules from '@element-plus/icons';//导入所有element icon图标const app = createApp(App);
app.use(ElementPlus, {locale: zhCn,//使用中文语言
})
// 全局注册element-plus icon图标组件
Object.keys(ElIconModules).forEach((key) => {app.component(key, ElIconModules[key]);
});app.mount('#app')

最后使用排出法才确定是个图标组件的名称导致的bug，后面就换了一个图标组件。然后，也向官方提交了这个bug，官方开发成员建议换个名称，在main.js里这样导入，单独命名：

import { Menu as MenuIcon } from '@element-plus/icons-vue'

最后，我只直接换了一个其他icon组件，然后我提交了issues，建议他们重新改下命名方式。链接：[Bug Report] el-menu菜单组件引入动态渲染icon图标时，图标组件刚好是Menu时报错，菜单不显示 · Issue #5570 · element-plus/element-plus · GitHub

如果你目前一定要动态渲染使用Menu这个icon图标的话，全局导入时重起一个其他别名也可以，修改后的main.js代码如下：

import {createApp} from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn';//ElementPlus 组件内部默认使用英语，使用中文语言
import 'element-plus/dist/index.css';
import * as ElIconModules from '@element-plus/icons';//导入所有element icon图标const app = createApp(App);
app.use(ElementPlus, {locale: zhCn,//使用中文语言
})// 全局注册element-plus icon图标组件
Object.keys(ElIconModules).forEach((key) => {//循环遍历组件名称if ("Menu" !== key) {//如果不是图标组件不是Menu，就跳过，否则加上ICon的后缀app.component(key, ElIconModules[key]);} else {app.component(key + "Icon", ElIconModules[key]);}
});
app.mount('#app')

然后，你存数据库的图标名称也要是你重命名的这个MenuIcon名称才行，因为for循环菜单组件那要匹配。这样就正常了。

参考文献：

1、[Bug Report] el-menu菜单组件引入动态渲染icon图标时，图标组件刚好是Menu时报错，菜单不显示 · Issue #5570 · element-plus/element-plus · GitHub

Vue3使用element-plus1.3.0版本的el-menu菜单组件引入动态渲染icon图标时，图标组件刚好是Menu时报错，菜单不显示的解决方法相关推荐

在命令行窗口查看Maven版本时，出现 Error: JAVA_HOME is set to an invalid directory.的解决方法
在命令行窗口查看Maven版本时,出现 Error: JAVA_HOME is set to an invalid directory.的解决方法参考文章: (1)在命令行窗口查看Maven版本时, ...
vs2010一运行就报错deven.exe assert failure 解决方法，卸载系统中.netFramework最新版本的（简体中文）...
vs2010一运行就报错deven.exe assert failure 解决方法,卸载系统中.netFramework最新版本的(简体中文) 转载于:https://www.cnblogs.com/ ...
Hexo博客Next6.0版本主题配置（背景图片加载、侧边栏社交小图标设置、设置网站图标）
随机背景图片加载原理自动更换背景是修改添加背景的css样式实现图片来源 https://source.unsplash.com/ 修改背景样式修改themes\next\source\css\ ...
HDwiki 6.0 图片大图不能正常显示的解决方法
运行环境:IIS7.5 + PHP5.5 问题描述:在HDwiki 6.0 的词条中添加图片后,点击缩略图不能正常显示大图,仅显示图片路径. 解决方法:打开view/default/header.ht ...
VC++6.0 报错error spawning cl.exe解决方法【推荐】
有的朋友,在安装完VC6.0之后,运行程序时报错:error spawning cl.exe 错误原因:VC运行目录路径配置有误解决方案:首先保证你是使用默认路径进行安装的VC6.0,并且没有设置过 ...
关闭vb6.0 时报内存不能为read 错误解决方法
今天重新安装vb6.0,一切都很顺利,但是在关闭vb时总是弹出: "0x0055a8ea"指令引用的"0x608af85c"内存.该内存不能为"rea ...
Android studio中打包生成release版本时提示 A problem occurred evaluating root project ‘My‘出错问题的解决方法
在Android studio中打包生成release版本时,下面的build output 提示 : A problem occurred evaluating root project 'My ...
VERICUT9.0版本以上导入毛坯和机床模型不显示的解决方法
在VERICUT新建项目后,定义的机床和毛坯无法显示,其解决办法如下: 1.单击"项目树"中的项目 2.在"配置项目"中勾选"调用机床仿真口令&quo ...
php输出excel表格乱码和第一个0不显示的解决方法（详细）
而关于php的也有,但是大多都是用phpExcel导出的方法或者spreadsheet等类或者控件之类的导出方法,而我所在维护的系统却用很简单的方法,如下,网上很少有讲如何设置要导出数据的EXcel格 ...

Vue3使用element-plus1.3.0版本的el-menu菜单组件引入动态渲染icon图标时，图标组件刚好是Menu时报错，菜单不显示的解决方法

Vue3使用element-plus1.3.0版本的el-menu菜单组件引入动态渲染icon图标时，图标组件刚好是Menu时报错，菜单不显示的解决方法相关推荐

最新文章

热门文章