一、Element UI 中菜单的折叠与展开
- 在
Element UI
中的官方文档中,在NavMenu
导航菜单中,在Menu Attribute
中,有一个 collapse
属性。它的作用是是否水平折叠收起菜单(仅在 mode
为 vertical
时可用),是一个Boolean
类型,默认值为false
,我们可以根据这个 collapse
属性,通过设置它的true
或者false
的值控制菜单的折叠与展开。 - 在导航菜单头部,可以设置一个按钮,通过点击控制左侧菜单的显示与隐藏,代码如下:
<div class="toggle-button" @click="toggleCollapse">|||</div>
- 在
data
中定义一个数据isCollapse
,是一个变量,控制它的值实现切换,默认为false
,代码如下:
isCollapse: false,
- 在
el-menu
中,可以动态绑定 collapse
的值,代码如下
:collapse="isCollapse"
- 在
method
中,定义一个之前按钮绑定点击事件的方法,toggleCollapse
,在这个方法当中,控制isCollapse
的值,进行取反操作,这样就实现了菜单的折叠与展开,代码如下:
toggleCollapse () {
this.isCollapse = !this.isCollapse
}
- 菜单的折叠与展开
Element
中默认是有动画的,不方便显示,我们可以选择关闭,在Menu Attribute
中,有一个collapse-transition
属性。它的作用是是否开启折叠动画,是一个 boolean
类型,默认值为true
,我们把它设置为false
,就可以关闭折叠动画了,代码如下:
:collapse-transition="false"
- 在左侧菜单的展开与折叠中,会发现一个问题,文本和图标折叠了,但是菜单的长度并没有折叠,发现原因是菜单的长度给了一个固定的值,而实际上我们需要动态给定长度。如果菜单是展开的,长度是等于文本的长度+图标的长度。如果菜单是折叠的,长度是等于图标的长度。我们可以根据
isCollapse
的值进行判断,通过它的值为true
或者是false
,来给定不同的长度,代码如下:
<el-aside :width="isCollapse?'64px':'200px'">
二、菜单的折叠与展开实现
- 主目录菜单的完整代码:
<template>
<el-container class="home-container">
<el-header>
<el-button type="info" @click="logout">退出</el-button>
</el-header>
<el-container>
<el-aside :width="isCollapse?'64px':'200px'">
<div class="toggle-button" @click="toggleCollapse">|||</div>
<el-menu
background-color="#333744"
text-color="#fff"
active-text-color="#409EFF"
unique-opened
:collapse="isCollapse"
:collapse-transition="false"
:router="true"
:default-active="activePath">
<el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
<template slot="title">
<i :class="iconsObj[item.id]"></i>
<span>{{ item.authName }}</span>
</template>
<el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="saveNavState('/'+subItem.path)">
<template slot="title">
<i class="el-icon-menu"></i>
<span>{{ subItem.authName }}</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
data () {
return {
menuList: [],
iconsObj: {
'125': 'iconfont icon-yonghu1',
'103': 'iconfont icon-quanxian',
'101': 'iconfont icon-shangpin',
'102': 'iconfont icon-dingdan2',
'145': 'iconfont icon-icon_huabanfuben'
},
isCollapse: false,
activePath: ''
}
},
created () {
this.getMenuList()
this.activePath = window.sessionStorage.getItem('activePath')
},
methods: {
logout () {
window.sessionStorage.clear()
this.$router.push('/login')
},
async getMenuList () {
const { data: res } = await this.$http.get('menus')
if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
this.menuList = res.data
console.log(res)
},
toggleCollapse () {
this.isCollapse = !this.isCollapse
},
saveNavState (activePath) {
window.sessionStorage.setItem('activePath', activePath)
this.activePath = activePath
}
}
}
</script>
<style lang="less" scoped>
.home-container {
height: 100%;
}
.el-header {
background-color: #373d41;
display: flex;
justify-content: space-between;
padding-left: 0;
align-items: center;
color: #fff;
font-size: 20px;
> div {
display: flex;
align-items: center;
span {
margin-left: 15px;
}
}
}
.el-aside {
background-color: #333744;
.el-menu {
border-right: none;
}
}
.el-main {
background-color: #eaedf1;
}
.iconfont {
margin-right: 10px;
}
.toggle-button {
background-color: #4a5064;
font-size: 10px;
line-height: 24px;
color: #fff;
text-align: center;
letter-spacing: 0.2em;
cursor: pointer;
}
</style>
- 菜单的展开与折叠的效果实现:
- 菜单的展开效果:
- 菜单的折叠效果: