一、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>
- 菜單的展開與摺疊的效果實現:
- 菜單的展開效果:
- 菜單的摺疊效果: