ruoyi vue3版本web端隐藏侧边栏及其顶部导航栏

已于 2024-09-05 08:39:52 修改
阅读量615 收藏 4
点赞数 11
文章标签： vue.js 前端 javascript
于 2024-07-30 09:15:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a666666000/article/details/140787446
版权

做项目时有个需求是在web端里面嵌入一个页面全屏的大屏，但若依web自带的侧边栏导航和顶部导航一时还不知道怎么隐藏起来，于是在网上到处查找资料，终于，还是在若依的gitee文档中发现了线索

怎么隐藏侧边栏和顶部导航栏实现完全的全屏 · Issue #I4XSKH · 若依/RuoYi-Vue - Gitee.com

在这里，作者表明项目中仅封装有隐藏侧边栏的方法 toggleSideBarHide 于是，我们采用作者的建议参考侧边栏的实现的逻辑。

实现过程

1.在store目录下的app.js中加入对应控制顶部显隐的属性topbar，同时在actions中加入对应方法toggleTopBarHide

2.进入layout目录下的index页面

加入如下代码

到这里，已经可以实现顶部和侧边栏的显隐了

使用

仅作记录

阿奇__
关注
【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式
Sabrina_cc的博客
07-20 7万+
【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式
显示/隐藏侧边栏
12-09
显示/隐藏 显示/隐藏 俺是个js初学者，献丑了。这段js演示其实很简单，俺在这里只是想跟js大大们说一句：js是行为，不要跟样式表打架。有些事还是该由css来做的，例如：display:none || display:block，简直泛滥成灾了！俺只会玩玩css，拿到js不会改，不敢改，唉。明明一个class就能甩给css做的事，js为啥要抢着做呢？搞得俺们这些会点css滴菜鸟们好是郁闷~难道玩css就一定要会js么？ [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
若依框架跳转进入页面隐藏侧边栏和顶部导航栏
Geng_____的博客
03-20 2024
小伙伴们在使用若依框架的时候经常会遇到一个问题就是你想展示某一个页面的时候不展示侧边栏和顶部导航栏，接下来我就向大家介绍一下我的办法。只需要在mounted的时候写上这段代码就可以。
vue中将侧边栏隐藏
m0_56698268的博客
04-07 3492
vue中将侧边栏隐藏
vue3侧边栏
weixin_44761131的博客
08-24 905
vue3侧边栏
vue3 侧边栏实现
最新发布
wenlai123456的博客
08-22 321
【代码】vue3 侧边栏实现。
前后端分离RuoYi-Vue.zip(老版本)
05-20
《前后端分离实践：基于RuoYi-Vue的老版本项目解析》 在现代Web开发中，前后端分离已经成为一种主流架构模式，它能够提高开发效率、优化用户体验，并且有利于团队协作。本篇文章将深入探讨一个名为“RuoYi-Vue”的...
RuoYi-Vue全新Pro版本
10-09
RuoYi-Vue全新Pro版本，优化重构所有功能。基于Spring Boot + MyBatis Plus + Vue & Element实现的后台管理系统+微信小程序，支持RBAC动态权限、数据权限、SaaS多机场、Flowable工作流、三方登录、支付、短信、商城...
若依框架(RuoYi)系列视频教程 RuoYi-Vue前后端分离版本 118集
06-10
├──101 3.4.0版本更新介绍.mp4 122.82M ├──102 使用undertow容器.mp4 23.32M ├──103 实现优雅关闭应用.mp4 13.40M ├──104 实现swagger文档增强.mp4 14.83M ├──105 实现excel表格增强.mp4 45.81M ├─...
RuoYi-Vue-fast-master_ruoyi项目_vuefast_若依前后端分离项目_
10-03
"RuoYi-Vue-fast-master" 是一个基于Vue.js框架的开源项目，名为"若依前后端分离项目"，其核心目标是提供一个高效、快速的开发环境，用于构建现代Web应用程序。该项目采用了Vue.js的最新版本，结合了现代化的前端...
RuoYi-Vue-Plus 是重写 RuoYi-Vue
03-07
《RuoYi-Vue-Plus：分布式集群与多租户场景下的全面升级》 RuoYi-Vue-Plus 是一款基于 Vue.js 框架的后台管理系统，它是 RuoYi-Vue 的全新升级版，专为分布式集群和多租户环境进行了深度优化。在原有框架的基础上，...
基于Vue3实现简约型侧边栏
都随它大小便吧
07-08 1694
有时遇到一些需求，需要实现左边侧边栏为父级菜单，右侧内容区的顶部为子级菜单，以及其底部为子级菜单对应的模块内容。
vue展示与隐藏侧边栏功能
qq_41742961的博客
03-29 3500
<el-menu :default-active="defaultActive" class="el-menu-vertical-demo" background-color="#3C4A78" :active-text-color="isCollapse ? '#fff' : '#3C4A78'" text-color="#F6F8FF" unique-opened :collapse="isCollapse" .
vue3侧边栏控制表格列的显示和隐藏
weixin_48929490的博客
11-16 1033
3.通过开关的 的属性 0和1 来控制每一列 0 显示 1不显示 又因为开关switch的点击事件可以获取到表格的而每一行数据,通过点击事件去触发另一个表格的每一列的显示和隐藏。1.先在表格的每一列上写控制这一列的显示和隐藏得属性v-if。2.控制这一列的显示隐藏写成数组,可以方便之后操作。
引领前端布局新风尚：Vue 3 自定义侧边栏菜单组件 - vue-sidebar-menu
gitblog_00046的博客
05-19 1717
引领前端布局新风尚：Vue 3 自定义侧边栏菜单组件 - vue-sidebar-menu vue-sidebar-menuA Vue.js Sidebar Menu Component项目地址:https://gitcode.com/gh_mirrors/vu/vue-sidebar-menu 在构建现代网页应用时，一个优雅的导航系统是不可或缺的组成部分。今天，我们向您隆重推出【vue-sid...
vue3 + element-plus实现侧边导航栏
dh99999900的博客
10-16 5177
当 NarBar.vue中绑定展开或收起的变量发生改变时候，右侧的内容不会随着左侧的内容变化而变化，而是会固定在初始位置不动。我们选择垂直导航菜单，后台管理系统彩带一般都可以被折叠，通过绑定一个变量来设定当前是否展开或关闭。侧边导航栏一般用在后台管理系统中，我们用element-plus更容易实现。所以我们需要在父组件中传入一个方法，在子组件触发，并且在。这个问题官网没有具体的解答，但是网上是有相关的处理方式的。中必须将控制展开和收起的变量暴露出去，用vue3中的。而绑定收起或展开的变量在。
vue3 + element plus实现侧边栏
热门推荐
左直拳的马桶_日用桶
09-28 1万+
一般前端项目少不了侧边栏。如图所示这些鬼东西特别繁琐，所以我们喜欢找些现成、开源的所谓后台管理的前端框架，开箱即用。方便是方便，而且做得还挺好，问题是，有学习成本，要按照它的规则行事。一些功能是怎么实现的，不清楚，除非研究它的源代码。想改的话，更不容易。一切都靠猜、盲测，一则不好改，二则出了问题也不知道是哪里的毛病，反而欲速则不达。所以我们之前基于一个空白的vue项目开发，把需要的路由、ajax封装等摞上去。现在是实现侧边栏菜单。点击左侧菜单项，对应页面展示在右侧。
vue仿侧边导航栏实现展示隐藏子元素效果
qq_34215737的博客
03-03 1156
效果如下： HTML: <div class="list" v-for="(item,value) in list" :key="value" @click="clikfun(item)"> {{item.val}}{{item.bool}} <div class="height0" :class="item.bool?'height1':''"...
ruoyi-vue版本
08-23
ruoyi-vue版本是若依的Vue版本，是基于Vue和Element UI框架开发的管理后台。该版本具有高频率的维护和更新，采用扁平化的风格，支持切换主题和响应式布局。虽然颜值不是特别高，但非常实用。最近，RuoYi似乎还要推出新的主题，但目前官网上还没有发布。如果你的后端同事使用的是Spring Boot，并且你们想采用前后端分离的方式开发，那么RuoYi Vue版本应该是首选。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [RuoYi Vue - 若依框架的 Vue 版本，免费开源、生态强大、专业的 admin 后台管理系统，基于 Vue + Element](https://blog.csdn.net/weixin_45583710/article/details/125842401)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值