vue2左侧菜单栏收缩展开功能实现
vue2左侧菜单栏收缩展开目前是非常常见的，我们在日常开发过程中经常会碰到。这一小节我们就详细了解一下这个功能，完善我们的项目开发。
首先，修改Main.vue页面中的一些属性，有些属性需要动态绑定。接下来我们来一步一步实现。
1. Main.vue页面代码
a. 修改侧边栏属性
我们给我们导入的Aside组件动态绑定一个isCollapse。然后再下面的方法中定义
logoTextShow是我们动态绑定的系统名称：当我们点击收缩菜单时，系统名称会隐藏，展示我们的系统图标。
下面是效果展示：
<!--其它代码--> <!-- 侧边栏 --> <el-aside :width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246);height: 100%"> <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow"/> </el-aside> <!--其它代码-->
b. 修改头部导航栏
头部导航栏是我们点击收缩展开按钮的地方，我们在这里动态绑定点击函数。collapse函数就是我们动态绑定的函数。
<!--其它代码--> <!-- 头部导航栏 --> <el-header style="border-bottom: 1px solid #ccc;"> <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse"/> </el-header> <!--其它代码-->
c. 定义我们的变量
我们在return中定义我们的collapseBtnClass图标变量；
定义Aside.vue中的sidewidth左侧菜单栏宽度
还有默认展示我们的系统名称而不是展示logo图片
<!--其它代码-->
data () {
return {
collapseBtnClass: 'el-icon-s-fold',
isCollapse: false,
sideWidth: 220,
logoTextShow: true
}
},
<!--其它代码-->d. collapse函数
这里我们函数的逻辑是：
当我们点击收缩菜单图标时，isCollapse变量为flase；
当我们的isCollapse变量为false时，this.sidewidth宽度为64，图标设置为收缩图标
然后我们的系统名称隐藏；
相反：我们的菜单宽度为220；设置展开图标，系统名称菜单展示
<!--其它代码-->
methods: {
collapse () {
this.isCollapse = !this.isCollapse
if (this.isCollapse) {
this.sideWidth = 64
this.collapseBtnClass = 'el-icon-s-unfold'
this.logoTextShow = false
} else {
this.sideWidth = 220
this.collapseBtnClass = 'el-icon-s-fold'
this.logoTextShow = true
}
}
}
<!--其它代码-->2. Header.vue页面代码
首先在我们面包屑上面加一个span标签：
绑定我们的class为collapseBtnClass：
设置一个点击事件：collapse
<!--其它代码--> <span :class="collapseBtnClass" style="cursor: pointer; font-size: 18px" @click="collapse"></span> <!--其它代码-->
这里牵扯到一个父子传值和子子传值。父子传值我们在子组件里面接收就要用props来接收
<!--其它代码-->
props: {
collapseBtnClass: String,
collapse: Function
}
<!--其它代码-->3. Aside.vue页面代码
我们在标签<el-menu>绑定我们的属性：
<el-menu
:default-openeds="[]" style="min-height: 100%; overflow-x: hidden"
background-color="#1f2d3d"
text-color="#fff"
default-active="/home"
active-text-color="rgb(75 175 255)"
:collapse-transition="false"
:collapse="isCollapse"
router>系统名称给一个v-show事件
<div style="height: 60px; line-height: 60px; text-align: center"> <img src="../assets/logo.png" alt="" style="width: 20px; position: relative; top: 2px;"> <b style="color: white" v-show="logoTextShow">仓库管理系统</b> </div>
然后我们在下面接收父组件传递的值：
<!--其它代码-->
props: {
isCollapse: Boolean,
logoTextShow: Boolean
}
<!--其它代码-->现在会有一个问题，我们点击收缩菜单栏时菜单文字会有遗留，我们给一个样式来隐藏文字
<style>
.el-menu-item.is-active {
background-color: rgb(38, 52, 69) !important;
}
.el-menu-item:hover {
background-color: rgb(38, 52, 69) !important;
}
.el-submenu__title:hover {
background-color: rgb(38, 52, 69) !important;
}
/*解决收缩菜单文字不消失问题*/
.el-menu--collapse span {
visibility: hidden;
}
</style>以上就是我们的菜单栏收缩展开全部教程。
到此这篇关于vue2左侧菜单栏收缩展开功能的文章就介绍到这了,更多相关vue2菜单栏收缩展开内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue this.$toast()用法 ，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了Vue 前端实现登陆拦截及axios 拦截器的使用,通过这个项目学习如何实现一个前端项目中所需要的 登录及拦截、登出、token失效的拦截及对应 axios 拦截器的使用。需要的朋友可以参考下2019-07-07
这篇文章主要介绍了vue使用keep-alive保持滚动条位置的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
本文重点介绍axios如何配合vue搭建项目框架,文章给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2018-07-07
vue中v-model、v-bind和v-on三大指令的区别详解
v-model和v-bind都是数据绑定的方式,下面这篇文章主要给大家介绍了关于vue中v-model、v-bind和v-on三大指令的区别,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
ElementUI中<el-form>标签中ref、:model、:rules的作用浅析
Element官方文档中写到,model是表单数据对象,rules是表单验证规则,下面这篇文章主要给大家介绍了关于ElementUI中<el-form>标签中ref、:model、:rules作用的相关资料,需要的朋友可以参考下2023-01-01
打包组件报错:Error:Cannot find module 'vue/compiler-sfc&ap
最近遇到这样的问题,vue组件库搭建过程中使用webpack打包组件时报错,本文给大家分享打包组件报错:Error: Cannot find module ‘vue/compiler-sfc‘的解决方法,感兴趣的朋友一起看看吧2023-12-12
最近在写vue的一个项目要实现过渡的效果,虽然vue动画不是强项,库也多,但是基本的坑还是得踩扎实,下面这篇文章主要给大家介绍了关于Vue中实现过渡动画效果的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue如何随心所欲调整el-dialog中body的样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
Vue组件通信$attrs、$listeners实现原理解析
这篇文章主要介绍了Vue组件通信$attrs、$listeners实现原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
最新评论