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"
:collapse="isCollapse"
>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">導航一</span>
</template>
<el-menu-item-group>
<span slot="title">分組一</span>
<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">
<span slot="title">選項4</span>
<el-menu-item index="1-4-1">選項1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">導航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">導航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">導航四</span>
</el-menu-item>
</el-menu>
<el-radio-group v-model="isCollapse" @change="toggleName">
<el-radio-button v-if="display" :label="false" >{{open}}</el-radio-button>
<el-radio-button v-else :label="true" >{{close}}</el-radio-button>
</el-radio-group>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: "#app",
data: function() {
return {
visible: false,
isCollapse: true,
display: true,
open: "展開",
close: "收縮",
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
toggleName: function() {
if (this.display === true) {
this.display = false;
} else {
this.display = true;
}
}
}
});
</script>
</html>