Vue2.0 +Element-UI+Vuex实现导航栏收缩展开功能

已于 2022-06-15 08:52:05 修改
阅读量1.7k 收藏 8
点赞数 1
分类专栏： 前端 文章标签： ui elementui vue.js
于 2022-06-14 16:32:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46403232/article/details/125279459
版权

这个功能的实现是使用vuex进行兄弟间的通信传值

1、element-ui中有collapse属性，设置属性值可以实现导航栏的伸缩和展开

找到定义侧边栏的组件，在el-menu中添加 :collapde:"isCollapse"，isCollapse是一个动态值

2.动态值在哪获得呢？

首先在侧边栏组件中的使用computed计算属性中更新数据，实时获得isCollapse的值

 这个值存储在vuex的子模块tab.js中

3.那怎么动态改变isCollpase的值呢？

它的值是根据触发头部组件的菜单按钮来改变的

所以在组件中，这个按钮设置一个方法

        

这个方法中中要调用vuex中tab.js的方法，因为改变tab.js中的mutations(只能在这）改变数据

方法中isCollapse的值取反，动态变化

 

weixin_46403232
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
vue2左侧菜单栏收缩展开功能
5年编程经验的老猿。
04-28 768
vue2左侧菜单栏收缩展开目前是非常常见的，我们在日常开发过程中经常会碰到。这一小节我们就详细了解一下这个功能，完善我们的项目开发。 首先，修改Main.vue页面中的一些属性，有些属性需要动态绑定。接下来我们来一步一步实现。
Vue前端项目-首页-左侧菜单栏的展开与折叠
热门推荐
踏 浪的博客
04-01 2万+
目录 1、思路 2、按钮单击事件 3、父组件调用 Vuex 改变侧边栏状态 4、新建app模块用于管理整个应用状态 5、左侧菜单栏 6、隐藏样式 实现效果 展开效果图: 合并效果图: 1、思路 点击按钮（展开与折叠按钮），触发左侧菜单栏的张开与折叠，需要使用一个变量（state.sidebar.opened）来控制 为什么要用state.sidebar.open...
Vue界面添加收缩和展开导航栏图标按钮
qq_54657526的博客
06-09 2486
此时我们考虑到：当点击收缩之后，收缩的图标应该变成展开的图标，点击展开图标之后，边栏会展开。collapseBtnClass:'el-icon-s-fold',//这里写想要的按钮的名称el-icon-s-fold。collapseBtnClass:'el-icon-s-fold',//这里写想要的按钮的名称el-icon-s-fold。this.collapseBtnClass='el-icon-s-unfold'//图标变成展开的图标。this.sideWidth=64//边栏宽度变成64。
vue展开收起元素，有过渡效果，超简单三步
stars______的博客
03-31 1404
3.页面中使用，通过修改topShow的true和false来达到效果。1.新建collapseTransition.js文件。2.在使用的页面内引用。
Vue2(三)实现子菜单展开收缩，带动画效果实现方法
10-17
主要介绍了vue实现收缩展开效果的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue + element ui 实现侧边栏导航栏折叠收起
qq_44830060的博客
01-20 1万+
首页布局如下 要求点击按钮,将侧边栏收缩, 通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。 methods: { // 点击按钮，切换菜单的折叠与展开 toggleCollapse() { this.isCollapse = !this.isCollapse; }, } 侧边栏代码 <!-- //侧边栏 --> <el-col :span="isCollap
Element 折叠面板 Collapse 改变箭头方向 默认90°
单飞吧的博客
09-14 2931
效果 折叠面板改变箭头方向 默认90° 点击为-90° 只需要添加样式 <style scoped> // 点击后方向 /deep/ .el-collapse-item__arrow.is-active { transform: rotate(-90deg);; } // 默认方向 /deep/ .el-collapse-item__arrow, .el-tabs__nav { transform: rotate(90deg)
基于Vue+Vue-Router+Vuex+Element-ui+axios，参考小米商城，实现的电商项目。.zip
10-30
这是一个基于Vue.js技术栈开发的电商项目，借鉴了小米商城的界面设计和功能实现。Vue.js是一个流行的前端JavaScript框架，以其轻量级、组件化、易学习和高性能的特点深受开发者喜爱。在这个项目中，Vue.js作为核心...
基于vue2.0 +vuex+ element-ui后台管理系统.rar
最新发布
02-20
结合Vue 2.0、Vuex和Element-UI，我们可以构建出一个高效、易维护的后台管理系统，实现数据的动态加载、页面的流畅跳转、用户操作的响应式反馈以及美观的界面设计。同时，这个系统还应包含权限控制、错误处理、API...
基于vue2.0+element-ui的管理后台实例源码
09-05
4. **组件设计**：Element UI 的组件可以被灵活地应用在这个管理后台中，如用于创建表单、展示数据、构建导航栏等。通过组合和自定义这些组件，开发者可以快速构建出符合业务需求的页面。 5. **响应式布局**：管理...
vue+Element-UI 前端框架
02-15
2. **Element-UI**：Element-UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，它的设计风格简洁、统一，包含表格、按钮、提示、下拉菜单等多种常见的UI组件，大大简化了前端开发过程。在本项目中...
基于SpringBoot + vue + Element-UI 搭建的个人博客系统.zip
08-16
在个人博客系统中，Element-UI的组件被广泛使用，比如用于创建导航栏、侧边栏、文章详情页的布局、表单元素等，提供了一致且美观的界面设计。 此外，项目中的`code_resource_1`可能包含了具体的源代码文件，可能...
elementplus实现左侧菜单栏收缩与展开
黎小小的博客
08-28 7404
Home.vue下包含aside.vue和menu.vue。
vue+vant+van-collapse（Collapse 折叠面板）的右侧箭头方向改变 // 图标改变 // 标题改变
DcTbnk的博客
04-15 5259
点击可查看原文章 改变标题 // 官方文档 <van-collapse v-model="activeNames"> <van-collapse-item name="1"> <template #title> <div>标题1 <van-icon name="question-o" /></div> </template> 内容 </van-collapse-item&gt
vue element-ui级联选择器选中后下拉框自动收起
ʚ菲菲的博客ɞ
02-25 1724
Cascader 级联选择器设置 严格的遵守父子节点不互相关联(checkStrictly: true)，此时每一级都可以选择(选项前会有圆圈可勾选)，实现点击选中后下拉框自动收起。 设置监听选择器值变化的时候，把 dropDownVisible 属性设置为 false 即可。 <el-cascader ref="deptIdCascader" v-model="updateInfo.deptId" :props="{checkStrictly: true}"&g
解决Element-ui中侧边栏最常出现的小问题
oilpastell的博客
08-17 4185
1. 解决侧边导航栏收缩后，右侧内容不能一起收缩的问题 解决方法：修改width属性值 2. 解决侧边导航栏不能平铺整个页面 解决方法：给导航栏最小高，单位用vh 这里补充vh vw的用法 vh：相当于浏览器的高度 vw：相当于浏览器的宽度 例如：calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小 ...
记录：vue 让element-ui级联选择器选中后下拉框自动收起/解决懒加载后选择任意一级出现暂无数据
iseyre的博客
02-15 1276
【代码】记录：vue element-ui级联选择器选中后下拉框自动收起。
vue实现收起展开面板，让你的页面动态起来
Shids_的博客
02-24 3759
vue实现收起展开面板，让你的页面动态起来
[vue]v-for循环出的列表如何实现每一项单独展开收起
栗子菜菜
06-28 4519
v-for循环出的列表实现单个展开收起
创建一个vue+element-ui的多功能的首页
07-24
当然！下面是一个基于Vue.js和Element UI的多功能首页的示例： 1. 在src/views文件夹下创建Home.vue组件，作为首页的主要内容。 ```vue <template> <div class="home"> <h1>Welcome to Home Page</h1> <!-- 添加你想要展示的内容 --> </div> </template> <script> export default { // 组件逻辑代码 } </script> <style scoped> /* 组件样式 */ </style> ``` 2. 在src/components文件夹下创建Navbar.vue组件，作为顶部导航栏。 ```vue <template> <nav class="navbar"> <ul> <li><a href="#">Home</a></li> <!-- 添加其他导航栏项 --> </ul> </nav> </template> <script> export default { // 组件逻辑代码 } </script> <style scoped> /* 组件样式 */ </style> ``` 3. 在src/App.vue文件中，将Navbar组件和Home组件添加到首页。 ```vue <template> <div id="app"> <Navbar /> <router-view /> </div> </template> <script> import Navbar from './components/Navbar.vue' export default { name: 'App', components: { Navbar } } </script> <style> /* 全局样式 */ </style> ``` 4. 在src/main.js文件中，添加Element UI的引入和全局样式。 ```javascript import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') ``` 现在，你可以在Home.vue组件中添加任何你想要展示的内容，比如轮播图、卡片、列表等等。在Navbar.vue组件中，你可以添加其他导航栏项并进行相应的路由配置。 这个示例只是一个基本的多功能首页的示例，你可以根据具体的需求进行扩展和修改，添加更多的功能和组件。希望这个示例对你有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值