导航菜单 - EleMenus
5.9.1.快速使用
导航菜单组件是对 ElMenu 的扩展，提供了更多的属性以及美化了样式，使用示例：
运行代码 新窗口打开
5.9.2.属性列表
支持 ElMenu 的全部属性(请查看 Element 文档)，这里只列出额外增加的属性：
popupTheme 为 auto 表示同 theme 的配置，popupColorful 为 auto 表示同 colorful 的配置。
EleMenu 的事件以及实例方法与 ElMenu 的事件及实例方法一模一样(请查看 Element 文档)，这里不再做重复介绍。
ellipsisProps 属性同样支持 ElSubMenu 的所有属性以及 icon、iconProps、iconStyle 属性，例如自定义省略的图标：
运行代码 新窗口打开
属性 textEllipsisTooltip 开启后当菜单标题文字溢出有省略号时鼠标移入菜单项会 Tooltip 弹出标题文字全部提示。
属性 mode="compact" 时菜单风格是紧凑型的垂直菜单风格。
5.9.3.菜单数据
菜单数据 items 同样支持 ElMenuItem、 ElSubMenu、 ElMenuItemGroup 组件的全部属性，这里只列出额外增加的属性：
path 可以为路由地址或外链地址，path 与 ElMenuItem 的 route 属性的区别是 path 会直接渲染为 a 标签并且宽高会撑满整个条目， 这样做可以支持鼠标拖拽到浏览器新页签打开，并且鼠标右键菜单也会有在 XXX 中打开链接，使用示例：
运行代码 新窗口打开
默认父级会渲染为 ElSubMenu 组件，设置 group: true 可渲染为 ElMenuItemGroup 组件。
iconProps 和 iconStyle 的详细说明，在 Element 中使用图标是要包一个 ElIcon 组件的：
然后将图片放在 public 目录下即可， Setting.png、Calendar.png、Link.png、User.png 等。
如果要使用传统字体图标也是一样的通过 icon 插槽自定义：
然后全局引入字体图标的样式即可，一般在 index.html 中引入图标的 css (css、ttf、woff 等文件可放在 public 中)。
5.9.6.常见问题
解决菜单多级时折叠状态下气泡菜单展开多级时关闭页面抖动，在 src/styles/index.scss 中加入：
/* 气泡菜单改为绝对定位 */
.el-popper.ele-menu > .el-menu--popup-container > .el-menu--popup {
overflow: visible;
.el-sub-menu > .el-popper {
position: absolute !important;
}
}
问题的原因是折叠时气泡菜单默认是绝对定位，EleMenus 改为了固定定位(fixed)，因为默认气泡菜单太多超出屏幕高度时不会滚动， EleMenus 增加了最大高度 100vh 并滚动，滚动就必须要子级的子级为固定定位， 而菜单关闭动画是 transform 实现的会使里面的 fixed 定位的位置出现问题，上面加的样式是重置为不可滚动及绝对定位， 如果子级菜单有很多需要超出屏幕高度滚动就不能用上面的方式实现，可以使用另一种方式解决：
就是父级的 hideTimeout 要依次比子级的 hideTimeout 大 350 这样子级关闭后才会开始关闭父级(动画时间一般是300毫秒)。
运行代码 新窗口打开