目录
前言
又又又踩坑了,vue+element-plus使用<el-icon><Menu /></el-icon>导致加载不出页面且内存一直持续飙升!
一、问题描述
在Vue中使用element-plus且全局注册了icon,使用其他图标正常,使用Menu图标后加载不出页面且内存一直持续飙升!
二、原因分析以及解决办法
1.原因分析
通过element-plus官网中关于图标的说明可知:是由于Menu命名冲突引起的,此bug已有人提交,但截至目前(2022-06-26)尚未修复,官方建议通过设置图标别名进行规避。
2.解决办法
在main.js中修改全局引入图标的方法,代码如下:
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
// 新增名为Menu的判断
if ("Menu"!= key){
app.component(key, component);
}
else{
app.component(key + "Icon", component);
}
再使用该名为Menu的图标时,使用如下名称引用即可!
<el-icon><MenuIcon /></el-icon>
成功显示!