NavMenu导航菜单在vertical情况下没办法实现鼠标移入元素展示菜单,移出元素关闭菜单功能,故而需要额外写代码实现。
html代码实现:
<el-menu
default-active="1"
class="el-menu-vertical-demo"
mode="vertical"
id="el-menu-demo"
ref="menu">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
利用鼠标移入与移出事件来实现功能
js代码如下:
mouseLeave(){ //实现工具栏鼠标滑过的展示与关闭
var Vuethis=this;
var elMenu=document.getElementById("el-menu-demo");
elMenu.onmouseleave=()=>{
Vuethis.$refs.menu.close("1");
};
elMenu.onmouseover=()=>{
Vuethis.$refs.menu.open("1");
};
}