vue2左侧菜单栏收缩展开功能实现

更新时间：2024年04月29日 10:28:48 作者：Java-云海

vue2左侧菜单栏收缩展开目前是非常常见的,我们在日常开发过程中经常会碰到,这篇文章给大家介绍vue2左侧菜单栏收缩展开功能,感兴趣的朋友跟随小编一起看看吧

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菜单栏收缩展开内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

cdn模式下vue的基本用法详解
这篇文章主要介绍了cdn模式下vue的基本用法，本文通过图文并茂的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-10-10
Vue的click事件防抖和节流处理详解
今天小编就为大家分享一篇Vue的click事件防抖和节流处理详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue实现循环切换动画
这篇文章主要为大家详细介绍了vue实现循环切换动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-10-10
Vuejs 单文件组件实例详解
这篇文章主要介绍了Vuejs 单文件组件实例详解,需要的朋友可以参考下
2018-02-02
vue拦截器如何增加token参数
这篇文章主要介绍了vue拦截器如何增加token参数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
面试题：react和vue的区别分析
这篇文章主要介绍了react和vue的区别分析，在面试中经常会遇到，小编通过实例文字相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-04-04
详解Vue如何通过URL传递与获取参数
Vue Router 路由实际上就是一种映射关系,例如,多个选项卡之间的切换就可以使用路由功能来实现,在实际的开发中,经常需要通过URL来传递参数,同时在 JavaScript 脚本中需要获取URL中的参数,下面将介绍 Vue 项目中,如何通过 URL 对参数进行传递与获取,需要的朋友可以参考下
2024-09-09
基于vue实现pdf预览功能
随着互联网的发展,PDF 文件在信息交流和文档分享中起着重要的作用,通过在 Vue 组件中实现 PDF 预览功能,我们可以为用户提供便捷的内容阅读体验,下面我们就来看看具体实现方法吧
2023-08-08
Vue实现移动端拖拽交换位置
这篇文章主要为大家详细介绍了Vue实现移动端拖拽交换位置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-07-07
vite+vue3中如何使用router
这篇文章主要介绍了vite+vue3中如何使用router问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06