VUE解决菜单折叠Maximum call stack size exceeded. at VueComponent.handleMouseenter错误

最新推荐文章于 2024-08-21 18:19:20 发布

leaneam

最新推荐文章于 2024-08-21 18:19:20 发布

阅读量1.5k

点赞数 4

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/leaneam/article/details/122386724

版权

在Vue项目中遇到菜单折叠后点击引发的'UncaughtRangeError: Maximum call stack size exceeded'错误。解决方法是在二级菜单组件中添加空div，并通过CSS隐藏文字和箭头。具体样式修改包括设置高度、宽度为0，隐藏溢出内容及隐藏二级菜单的标题和箭头。

摘要由CSDN通过智能技术生成

VUE项目，当菜单折叠后，点击菜单时会报错如下：

Uncaught RangeError: Maximum call stack size exceeded. at VueComponent.handleMouseenter

解决方法如下：

在二级菜单界面（比如：_common_left_submenu.vue)增加<div></div>,如下图：以上方法解决了报错，但文字与箭头没有隐藏，还需要在样式增加如下内容：

<style>
.el-menu--collapse > div > .el-submenu > .el-submenu__title span {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}
.el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}
</style>