element ui 导航组件

父组件：

<template>

　　<el-aside :width="width" style="transition: 0.5s;">
　　　　<a-dside @adsideOpen="adsideOpen"></a-dside>
　　</el-aside>

</template>

 

<script>
import aDside from './Aside.vue'
export default {
　　data(){
　　　　return{
　　　　　　width:'200px'
　　　　}
　　},
　　components:{
　　　　aDside
　　},
　　methods:{
　　　　adsideOpen(res){
　　　　　　this.width=res+'px'
　　　　}
　　}
}
</script>

 

<style>　

.el-aside {
　　background-color: #D3DCE6;
　　color: #333;
　　text-align: center;
　　line-height: 200px;
}

</style>

 

子组件：

<template>
　　<div id="body">
　　　　<button @click="adsideOpen" class="icons_bg">
　　　　　　<i :class="icons" class="icons"></i>
　　　　</button>
　　　　<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" @select="selectRouter" background-　　　　　　　　　　　　　　　　color="#D3DCE6"
text-color="#000000"
active-text-color="#ffffff" >
　　　　　　<template v-for="(item,index) in routerlist" >
　　　　　　　　<el-submenu :index="item.title">
　　　　　　　　　　<template slot="title">
　　　　　　　　　　　　<i class="el-icon-location"></i>
　　　　　　　　　　　　<span slot="title">{{item.title}}</span>
　　　　　　　　　　</template>
　　　　　　　　　　<template v-for="(items,index) in item.chd">
　　　　　　　　　　　　<el-menu-item-group>
　　　　　　　　　　　　　　<el-menu-item :index="items.path">{{items.title}}</el-menu-item>
　　　　　　　　　　　　</el-menu-item-group>
　　　　　　　　　　</template>
　　　　　　　　</el-submenu>
　　　　　　</template>
　　　　</el-menu>
　　</div>
</template>

 

<script>
　　export default {
　　　　data() {
　　　　　　return {
　　　　　　isCollapse: false,
　　　　　　icons:'el-icon-s-fold',
　　　　　　open_res:true,
　　　　　　routerlist:[

　　　　　　　　{
　　　　　　　　　　title:'选择一',
　　　　　　　　　　chd:[
　　　　　　　　　　　　{path:'/index',name:'index',title:'首页'},
　　　　　　　　　　　　{path:'/type',name:'type',title:'分类'}
　　　　　　　　　　],
　　　　　　　　}
　　　　　　]
　　　　};
　　},
　　watch:{
　　},
　　mounted(){
　　},
　　methods: {
　　　　adsideOpen(){
　　　　　　this.isCollapse=!this.isCollapse
　　　　　　if(this.open_res){
　　　　　　　　this.icons="el-icon-s-unfold"
　　　　　　　　this.open_res=false
　　　　　　　　this.$emit('adsideOpen',65)
　　　　　　}else{
　　　　　　　　this.icons="el-icon-s-fold"
　　　　　　　　this.open_res=true
　　　　　　　　this.$emit('adsideOpen',200)
　　　　　　}
　　　　},
　　　　selectRouter(path){
　　　　　　// console.log(path)
　　　　　　this.$router.push({
　　　　　　path:path,
　　　　　　query:{}
　　　　　　})
　　　　},
　　　　handleOpen(key, keyPath) {
　　　　　　// console.log(key, keyPath);
　　　　},
　　　　handleClose(key, keyPath) {
　　　　　　// console.log(key, keyPath);
　　　　},
　　}
}
</script>

 

<style >
　　#body{
　　　　overflow-x: hidden;
　　}
　　.icons_bg{
　　　　background:#B3C0D1;
　　　　border:0px;
　　　　width:65px;
　　　　height:65px;
　　}
　　.icons{
　　　　font-size:30px;
　　　　color:white
　　}
　　.el-menu-vertical-demo:not(.el-menu--collapse) {
　　　　width: 200px;
　　　　min-height: 400px;
　　　　background-color: #D3DCE6;
　　}
　　.el-radio-button__inner{
　　　　padding:0 !important;
　　　　border:0px !important;
　　}　　
</style>