当前位置: 首页 > news >正文

ruoyi菜单折叠,菜单收缩

  问题描述

VUE菜单有一个BUG,当我们点击其它按钮或者首页的时候,已经展示的一级菜单是不会自动收缩的。这个问题也导致很多开发者把一级菜单都换成了二级菜单。

错误展示

错误的效果请看下图。

 解决方法

1、寻找菜单文件

因为我使用的是ruoyi的前端框架,所以菜单文件的路径是src/layout/components/Sidebar/index.vue文件,如果大家使用的是其他的框架或者自己写的去全局搜索关键字【el-menu】就能找到菜单页面。文件路径如下图

2、添加以下代码

// el-menu菜单中添加ref和open事件
<el-menu ref="menu"  @open="handleOpen"></el-menu>
data() {return {// 记录用户上次点击的菜单索引keyIndex:0,};},watch: {$route () {// 监控用户点击的菜单,如果是首页或者个人详情页面都要把上次打开的页面收缩起来。if (this.$route.path === '/index' ||this.$route.path ===  "/user/profile") {this.$refs.menu.close(this.keyIndex);}}},methods: {handleOpen (key) {this.keyIndex = key;}},

 3、完整的代码

<template><div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"><logo v-if="showLogo" :collapse="isCollapse" /><el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper"><el-menuref="menu"@open="handleOpen":default-active="activeMenu":collapse="isCollapse":background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground":text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor":unique-opened="true":active-text-color="settings.theme":collapse-transition="false"mode="vertical"><sidebar-itemv-for="(route, index) in sidebarRouters":key="route.path  + index":item="route":base-path="route.path"/></el-menu></el-scrollbar></div>
</template><script>
import { mapGetters, mapState } from "vuex";
import Logo from "./Logo";
import SidebarItem from "./SidebarItem";
import variables from "@/assets/styles/variables.scss";export default {components: { SidebarItem, Logo },data() {return {keyIndex:0,};},watch: {$route () {if (this.$route.path === '/index' ||this.$route.path ===  "/user/profile") {this.$refs.menu.close(this.keyIndex);}}},methods: {handleOpen (key) {this.keyIndex = key;}},computed: {...mapState(["settings"]),...mapGetters(["sidebarRouters", "sidebar"]),activeMenu() {const route = this.$route;const { meta, path } = route;// if set path, the sidebar will highlight the path you setif (meta.activeMenu) {return meta.activeMenu;}return path;},showLogo() {return this.$store.state.settings.sidebarLogo;},variables() {return variables;},isCollapse() {return !this.sidebar.opened;}}
};
</script>

4、修改后的效果

5、到此功能完成


-----华丽的分割线,以下是凑字数,大家不用花时间看,快去改代码-----

-----华丽的分割线,以下是凑字数,大家不用花时间看,快去改代码-----

-----华丽的分割线,以下是凑字数,大家不用花时间看,快去改代码-----

<template><div v-if="!item.hidden"><template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"><app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)"><el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}"><item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="$t(onlyOneChild.meta.title)" /></el-menu-item></app-link></template><el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body><template slot="title"><item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" /></template><sidebar-itemv-for="child in item.children":key="child.path":is-nest="true":item="child":base-path="resolvePath(child.path)"class="nest-menu"/></el-submenu></div>
</template><script>
import path from 'path'
import { isExternal } from '@/utils/validate'
import Item from './Item'
import AppLink from './Link'
import FixiOSBug from './FixiOSBug'export default {name: 'SidebarItem',components: { Item, AppLink },mixins: [FixiOSBug],props: {// route objectitem: {type: Object,required: true},isNest: {type: Boolean,default: false},basePath: {type: String,default: ''}},data() {this.onlyOneChild = nullreturn {}},methods: {hasOneShowingChild(children = [], parent) {if (!children) {children = [];}const showingChildren = children.filter(item => {if (item.hidden) {return false} else {// Temp set(will be used if only has one showing child)this.onlyOneChild = itemreturn true}})// When there is only one child router, the child router is displayed by defaultif (showingChildren.length === 1) {return true}// Show parent if there are no child router to displayif (showingChildren.length === 0) {this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }return true}return false},resolvePath(routePath, routeQuery) {if (isExternal(routePath)) {return routePath}if (isExternal(this.basePath)) {return this.basePath}if (routeQuery) {let query = JSON.parse(routeQuery);return { path: path.resolve(this.basePath, routePath), query: query }}return path.resolve(this.basePath, routePath)}}
}
</script>

相关文章:

ruoyi菜单折叠,菜单收缩

问题描述 VUE菜单有一个BUG&#xff0c;当我们点击其它按钮或者首页的时候&#xff0c;已经展示的一级菜单是不会自动收缩的。这个问题也导致很多开发者把一级菜单都换成了二级菜单。 错误展示 错误的效果请看下图。 解决方法 1、寻找菜单文件 因为我使用的是ruoyi的前端框…...

Linux 用户和用户组

Linux中关于权限的管控级别有2个级别&#xff0c;分别是: 针对用户的权限控制 针对用户组的权限控制 比如&#xff0c;针对某文件&#xff0c;可以控制用户的权限,也可以控制用户组的权限。 1、用户组管理 1.1、创建用户组 groupadd 用户组名 1.2、删除用户组 groupdel 用户…...

JavaBean文字格斗游戏(面向对象编程)的个人重写以及个人解释

题目和个人思路: 先写role类(对象)和构造方法(要按照标准的JavaBean来写) 根据题意,类中要有一个行为(方法)->攻击 开始进入main中, 首先当然是要创建两个对象,然后调用(攻击)attack方法 以上都是个人经过学习后重新又写的代码. 望各位指出不足....

动态面板案例分析

动态面板模型分析 如果在面板模型中&#xff0c;解释变量包括被解释变量的滞后值&#xff0c;此时则称之为“动态面板模型”&#xff0c;其目的是处理内生性问题。动态面板模型发展分为3个阶段&#xff0c;第1阶段是由Arellano and Bond(1991)提出的差分GMM(difference GMM)&a…...

vuepress+gitee免费搭建个人博客(无保留版)

文章目录 最终效果,一睹为快!一、工具选型二、什么是VuePress三、准备工作3.1 node 安装3.2 Git安装3.3 Gitee账号注册四、搭建步骤4.1 初始化VuePress4.2 安装VuePress4.3 初始化目录4.4 编写文章五、部署到Gitee5.1 创建仓库5.2 个人空间地址设置4.3 推送本地博客项目到Git…...

Java中的隐式转换和强制转换底层是怎么做的?

目录 1. 回顾数值型基本数据类型共有哪些&#xff1f; 2. 什么时候进行隐式类型转换&#xff1f; 3. 数据类型的隐式转换规则 4. 特殊隐式转换规则需牢记 5. 隐式转换小练习 5.1 byte 与 byte 如何转&#xff1f; 5.2 int&#xff0c;long&#xff0c;double 的转换 5.…...

Hbuilder本地调试微信H5项目(一)

摘要 通过内网穿透&#xff0c;访问本地Hbuilder创建的Vue项目 前置准备 下载并安装【HBuilder】&#xff0c;本文用的是HBuilder3.8.12版本&#xff0c;下载地址 下载并安装【微信开发者工具】&#xff0c;本文用的是1.06版本&#xff0c;下载地址 下载并安装【natapp】&a…...

OPC DCOM快速配置

目录 1 老系统配置 1.1 移除Windows 安全 1.2 建立相互能识别的用户账号 1.3 配置系统宽泛的DCOM设置 1.4 配置Server的特殊DCOM设置 1.5 恢复Windows安全 1 老系统配置 远程OPC访问必须在服务器和客户端两端配置DCOM。本文讲述如何正确配置 DCOM 的步骤并保证安全。 新…...

软件设计模式

1.UML 1.1类图表示法 uml类图中&#xff0c;类使用包含类名、属性、方法 属性或方法前的加好和减号表示了这个方法的可见性&#xff0c;可见性的符号有三种&#xff1a; 表示public -表示private #表示protected 1.2 类与类之间关系 关联关系 单向关联 双向关系 自关联 聚合关…...

Git常见场景命令总结

1、查看远程仓库标签/分支 git ls-remote --tags origin git ls-remote --heads origin2、删除远程仓库标签/分支 git push origin --delete refs/tags/my_tag3、删除本地标签/分支 git branch -d <branch_name>4、修改代码但未add回滚 git checkout -- <file1>…...

面向对象的分析与设计(精品课程)第一章作业

面向对象的分析与设计&#xff08;精品课程&#xff09;第一章作业 一. 单选题&#xff08;共2题&#xff0c;18分&#xff09;二. 多选题&#xff08;共3题&#xff0c;27分&#xff09;三. 填空题&#xff08;共5题&#xff0c;45分&#xff09;四. 简答题&#xff08;共1题&…...

要使用API接口获取淘宝电商平台的数据,您需要遵循以下步骤:

了解API文档和规范&#xff1a;首先&#xff0c;您需要了解淘宝电商平台的API文档和规范&#xff0c;以确定可用的接口和参数。您可以在淘宝开放平台的官方文档中找到这些信息。注册并获取API密钥&#xff1a;在使用API之前&#xff0c;您需要在淘宝开放平台注册并获取API密钥。…...

vue中动态style(如何动态修改伪元素样式)

vue中动态style(如何动态修改伪元素样式)_vue怎么在行内给伪元素加样式_爱上星星的鲸鱼的博客-CSDN博客...

碳当量及相关指数

声明 本文是学习GB-T 713.1-2023 承压设备用钢板和钢带 第1部分&#xff1a;一般要求. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本文件规定了承压设备用钢板和钢带的牌号表示方法、订货内容、尺寸、外形、重量、技术要求、检验 规则、…...

MySQL数据库入门到精通

介绍 终于将黑马程序员 MySQL数据库入门到精通&#xff0c;从mysql安装到mysql高级、mysql优化全囊括这个视频看完了&#xff0c;发现自己之前掌握的数据库知识只能算是个入门&#xff0c;现在将这个视频的笔记整理一下&#xff0c;方便复习。准备按基础篇&#xff0c;进阶篇&…...

【TA】OP-TEE demo学习

前言&#xff1a;工作原因接触Apple软件需要搭建TA环境&#xff0c;涉及到OP-TEE&#xff0c;学习一下 OP-TEE&#xff08;Open Portable Trusted Execution Environment&#xff09;是一个开放源代码的可信执行环境&#xff08;TEE&#xff09;软件框架。它提供了安全的执行环…...

什么是实时操作系统(UCOS简介)

uC/OS-III官网&#xff1a;Home Page - Weston Embedded Solutions 一、裸机与RTOS介绍 下面我将从不同方面阐述裸机与试试操作系统的区别&#xff0c;从而进一步介绍裸机和实时操作系统 定义&#xff1a; 裸机&#xff1a;裸机指的是没有任何操作系统或软件层的硬件系统。在…...

软考-操作系统

/4操作系统的作用 进程 进程的概念 进程是程序的一次执行过程&#xff0c;没有程序就没有进程 进程可有多个线程&#xff0c;线程可共享资源 进程的两个基本属性&#xff1a; 可拥有资源的独立单位可独立调度和分配资源的基本单位 线程可共享&#xff1a; 内存地址空间代码…...

【EasyExcel】excel表格的导入和导出

【EasyExcel】excel表格的导入和导出 【一】EasyExcel简介【二】EasyExcel使用【1】EasyExcel相关依赖【2】写Excel&#xff08;1&#xff09;最简单的写(方式一)&#xff08;2&#xff09;最简单的写(方式二)&#xff08;3&#xff09;排除模型中的属性字段&#xff08;4&…...

Unity shader内置standard代码解析

最近有相关需求制作&#xff0c;所以这里编写一个文档&#xff0c;方便后续的流程查看。 下载源码 由于unity内置的shader是无法查看源码的&#xff0c;你需要去官网下载对应版本内置源码查看 在引擎下载那里&#xff0c;会有一个Built in Shaders&#xff0c;下载 打开以后…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

DeepSeek越强,Kimi越慌?

被DeepSeek吊打的Kimi&#xff0c;还有多少人在用&#xff1f; 去年&#xff0c;月之暗面创始人杨植麟别提有多风光了。90后清华学霸&#xff0c;国产大模型六小虎之一&#xff0c;手握十几亿美金的融资。旗下的AI助手Kimi烧钱如流水&#xff0c;单月光是投流就花费2个亿。 疯…...

【Java多线程从青铜到王者】单例设计模式(八)

wait和sleep的区别 我们的wait也是提供了一个还有超时时间的版本&#xff0c;sleep也是可以指定时间的&#xff0c;也就是说时间一到就会解除阻塞&#xff0c;继续执行 wait和sleep都能被提前唤醒(虽然时间还没有到也可以提前唤醒)&#xff0c;wait能被notify提前唤醒&#xf…...