前言
在进行网站开发时,导航栏是一个非常重要的元素,它可以让用户更加方便地浏览和操作网站。而实现导航栏的收起展开功能,可以为用户提供更加灵活自由的选择。本文将介绍如何使用 Element UI 框架实现导航栏的收起展开功能,让你的网站更加符合用户的需求。
实现思路
1. 首先给
el-menu
加上:collapse="isCollapse"
属性,这个属性也是element
上的一个参数,意思为是否开启折叠动画,在data
中定义isCollapse
,用true
和false
控制展开与收起。
2. 在
html
中写入以下代码。
<el-menu :collapse="isCollapse" class="el-menu-vertical"></el-menu>
3. 这里还需要把
el-aside
的宽度设置为跟el-menu
一样,以免出现执行展开收起时宽度不一样。
<!-- width的宽度跟collapse一样动态控制 -->
<el-aside width="collapse"></el-aside>
4. 展开和收起按钮利用
isCollapse
的值动态改变,控制显示隐藏。
<el-header>
<div :title="isCollapse ? '点击展开' : '点击收起'" class="box_bgd" @click="isC">
<!-- 点击展开收起导航和切换对应图标 -->
<i :class="!isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'"></i>
</div>
</el-header>
5.
data
中定义的变量。
export default {
name: "Main",
data() {
return {
isCollapse: false, //默认为展开
};
},
};
6.
methods
中的点击事件。
methods: {
// 动态控制展开与收起和切换对应图标
isC() {
this.isCollapse = !this.isCollapse;
},
},
7. 用到的
css
代码。
.el-menu-vertical:not(.el-menu--collapse) {
width: 240px;
}
最后附上完整代码
<template>
<div>
<el-container>
<!-- width的宽度跟collapse一样动态控制 -->
<el-aside width="collapse">
<el-menu :default-active="$route.path" router :collapse="isCollapse" class="el-menu-vertical" background-color="#393e42"
text-color="#fff" active-text-color="rgb(64, 158, 255)">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-s-tools"></i>
<span>工厂设置</span>
</template>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header>
<div :title="isCollapse ? '点击展开' : '点击收起'" class="box_bgd" @click="isC">
<!-- 点击展开收起导航和切换对应图标 -->
<i :class="!isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'"></i>
</div>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
data() {
return {
isCollapse: false, //默认为展开
};
},
methods: {
// 动态控制展开与收起和切换对应图标
isC() {
this.isCollapse = !this.isCollapse;
},
},
};
</script>
<style scoped>
.el-header {
background: #b3c0d1;
color: #333;
padding: 0 !important;
}
.el-aside {
background: #393e42;
color: #333;
height: 100vh;
}
.el-menu {
border-right-width: 0;
}
.el-main {
color: #333;
}
.el-menu-vertical:not(.el-menu--collapse) {
width: 240px;
}
.box_bgd {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.box_bgd i {
font-size: 20px;
}
.box_bgd:hover {
background: rgb(203, 215, 230);
}
</style>