element -ui 里导航菜单是通过两个按钮控制的,但实际开发中很多情况是通过一个按钮来toggle,而且有一个坑就是elemnt ui NavMenu的el-radio-butto 不是click事件,而是只能触发change事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- import CSS -->
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
span.el-radio-button__inner{
padding:5px 15px;
}
el-menu{
display: none;
}
el-radio-group{
display: none;
}
</style>
</head>
<body>
<div id="app">
<el-menu
default-active="1-4-1"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose