ElementUI 难点攻克

七月 11, 2024 2478

汇聚各个时间段，关于 ElementUI 的一些难点问题，他们掌握之后又很容易忘记，全部汇总在这里

1. el-menu 纵向折叠，鼠标滑过弹出子菜单，控制台输出：Uncaught RangeError: Maximum call stack size exceeded.

  • 异常情况
1
2
3
4
5
6
7
8
9
10
11
Uncaught RangeError: Maximum call stack size exceeded.
    at VueComponent.handleMouseenter (element-ui.common.js:3591:1)
    at invokeWithErrorHandling (vue.runtime.esm.js:3033:1)
    at HTMLLIElement.invoker (vue.runtime.esm.js:1832:1)
    at original_1._wrapper (vue.runtime.esm.js:7500:1)
    at VueComponent.handleMouseenter (element-ui.common.js:3591:1)
    at invokeWithErrorHandling (vue.runtime.esm.js:3033:1)
    at HTMLLIElement.invoker (vue.runtime.esm.js:1832:1)
    at original_1._wrapper (vue.runtime.esm.js:7500:1)
    at VueComponent.handleMouseenter (element-ui.common.js:3591:1)
    at invokeWithErrorHandling (vue.runtime.esm.js:3033:1)
  • 触发条件

使用自定义组件 (如 menu-item ) 来渲染嵌套菜单渲染出 el-submenu 时，就会出现上面的异常

1
2
3
4
<el-menu mode="vertical" :collapse="true" >
    <menu-item v-for="item in menus" :menu="item" :key="item.path"/>
</el-menu>

  • 解决方案

第一个解决方案是给自定义组件最外城包一个 div：

1
2
3
4
5
6
7
8
9
10
11
<template>
<div>
  <el-submenu index="2">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">导航一</span>
    </template>
    <el-menu-item index="1-1">选项1</el-menu-item>
    <el-menu-item index="1-2">选项2</el-menu-item>
</div>
</template>

这样会产生副作用，折叠的时候，菜单的标题文字没有隐藏需要做样式补偿：

1
2
3
4
5
6
7
8
9
10
11
12
13
.el-menu--collapse {
    .el-submenu {
        &>.el-submenu__title {
            &>span {
                width: 0;
                height: 0;
                overflow: hidden;
                visibility: hidden;
                display: inline-block;
            }
        }
    }
}

因为原有样式为 .el-menu--collapse > .el-submenu > .el-submenu__title span，补偿就是去掉第一个 > 。

第二个方法是把自定义组件改为函数 (functional) 组件:

1
2
3
4
5
6
7
8
9
10
<template functional>
<el-submenu index="2">
    <template slot="title">
        <i class="el-icon-location"></i>
        <span slot="title">导航一</span>
    </template>
    <el-menu-item index="1-1">选项1</el-menu-item>
    <el-menu-item index="1-2">选项2</el-menu-item>
</el-submenu>
</template>
  • 总结

目前并不知道异常导致的本质原因，但是找到了两个解决方案，其中第二个只能在自定义组件逻辑简单的时候使用。