仅对该 折叠功能 简洁分析过程
main中:
<template>
<el-container style="height:100%">
<!-- 侧边栏 -->
<el-aside width="200px">
<Aside></Aside>
</el-aside>
<el-container>
<el-header>
<Header></Header>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
aside中:
el-menu :collapse=“isCollapse”
通过collapse的值选择展开和折叠,在header中通过按钮操作去修改collapse值从而实现展开和折叠。header使用store的mutations去修改state的isCollapse值,所以用computed 计算isCollapse的值,
<el-menu @open="handleOpen" @close="handleClose" :collapse="isCollapse">
<h3>{{isCollapse?'后台':'后台管理系统'}}</h3>
<!-- 只有一级菜单 -->
<el-menu-item index="1" >
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
</el-menu-item>
<!-- 有二级菜单 -->
<el-submenu index="2">
<!-- 先一级菜单 -->
<template slot="title">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</template>
<!-- 再二级菜单 -->
<el-menu-item-group >
<el-menu-item index="2-1">二级1</el-menu-item>
<el-menu-item index="2-2">二级2</el-menu-item>
<el-menu-item index="2-3">二级3</el-menu-item>
<el-menu-item index="2-4">二级4</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</template>
computed:{
isCollapse(){
return this.$store.state.tab.isCollapse
}
}
header组件中
设置点击按钮对aside进行折叠
<el-button @click="handleMenu" ></el-button>
methods:{
handleMenu(){
this.$store.commit('CollapseMenu')
}
}
使用vuex
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import tab from "./tab.js"
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
tab,
}
})
store/tab.js
export default{
state:{
isCollapse:false
},
mutations:{
CollapseMenu(state){
state.isCollapse = !state.isCollapse
}
}
}
也可以用组件之间通信方式。