From af0e0a110e7187bf008655f7510199a0c0b25ec4 Mon Sep 17 00:00:00 2001
From: Nymph2333 <498092988@qq.com>
Date: 星期一, 10 四月 2023 14:27:40 +0800
Subject: [PATCH] newInstance() 已弃用,使用clazz.getDeclaredConstructor().newInstance() This method propagates any exception thrown by the nullary constructor, including a checked exception. Use of this method effectively bypasses the compile-time exception checking that would otherwise be performed by the compiler. The Constructor.newInstance method avoids this problem by wrapping any exception thrown by the constructor in a (checked) InvocationTargetException. The call clazz.newInstance() can be replaced by clazz.getDeclaredConstructor().newInstance() The latter sequence of calls is inferred to be able to throw the additional exception types InvocationTargetException and NoSuchMethodException. Both of these exception types are subclasses of ReflectiveOperationException.
---
ruoyi-ui/src/components/TopNav/index.vue | 118 ++++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 80 insertions(+), 38 deletions(-)
diff --git a/ruoyi-ui/src/components/TopNav/index.vue b/ruoyi-ui/src/components/TopNav/index.vue
index fb15c59..5f0edbe 100644
--- a/ruoyi-ui/src/components/TopNav/index.vue
+++ b/ruoyi-ui/src/components/TopNav/index.vue
@@ -5,14 +5,14 @@
@select="handleSelect"
>
<template v-for="(item, index) in topMenus">
- <el-menu-item :index="item.path" :key="index" v-if="index < visibleNumber"
+ <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
><svg-icon :icon-class="item.meta.icon" />
{{ item.meta.title }}</el-menu-item
>
</template>
<!-- 顶部菜单超出数量折叠 -->
- <el-submenu index="more" v-if="topMenus.length > visibleNumber">
+ <el-submenu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
<template slot="title">更多菜单</template>
<template v-for="(item, index) in topMenus">
<el-menu-item
@@ -30,22 +30,36 @@
<script>
import { constantRoutes } from "@/router";
+// 隐藏侧边栏路由
+const hideList = ['/index', '/user/profile'];
+
export default {
data() {
return {
// 顶部栏初始数
visibleNumber: 5,
- // 是否为首次加载
- isFrist: false,
+ // 当前激活菜单的 index
+ currentIndex: undefined
};
},
computed: {
+ theme() {
+ return this.$store.state.settings.theme;
+ },
// 顶部显示菜单
topMenus() {
- return this.routers.map((menu) => ({
- ...menu,
- children: undefined,
- }));
+ let topMenus = [];
+ this.routers.map((menu) => {
+ if (menu.hidden !== true) {
+ // 兼容顶部栏一级菜单内部跳转
+ if (menu.path === "/") {
+ topMenus.push(menu.children[0]);
+ } else {
+ topMenus.push(menu);
+ }
+ }
+ });
+ return topMenus;
},
// 所有的路由信息
routers() {
@@ -57,7 +71,13 @@
this.routers.map((router) => {
for (var item in router.children) {
if (router.children[item].parentPath === undefined) {
- router.children[item].path = router.path + "/" + router.children[item].path;
+ if(router.path === "/") {
+ router.children[item].path = "/" + router.children[item].path;
+ } else {
+ if(!this.ishttp(router.children[item].path)) {
+ router.children[item].path = router.path + "/" + router.children[item].path;
+ }
+ }
router.children[item].parentPath = router.path;
}
childrenMenus.push(router.children[item]);
@@ -68,20 +88,26 @@
// 默认激活的菜单
activeMenu() {
const path = this.$route.path;
- let activePath = this.routers[0].path;
- if (path.lastIndexOf("/") > 0) {
+ let activePath = path;
+ if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
const tmpPath = path.substring(1, path.length);
activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
- } else if ("/index" == path || "" == path) {
- if (!this.isFrist) {
- this.isFrist = true;
- } else {
- activePath = "index";
+ if (!this.$route.meta.link) {
+ this.$store.dispatch('app/toggleSideBarHide', false);
}
+ } else if(!this.$route.children) {
+ activePath = path;
+ this.$store.dispatch('app/toggleSideBarHide', true);
}
this.activeRoutes(activePath);
return activePath;
},
+ },
+ beforeMount() {
+ window.addEventListener('resize', this.setVisibleNumber)
+ },
+ beforeDestroy() {
+ window.removeEventListener('resize', this.setVisibleNumber)
},
mounted() {
this.setVisibleNumber();
@@ -89,23 +115,24 @@
methods: {
// 根据宽度计算设置显示栏数
setVisibleNumber() {
- const width = document.body.getBoundingClientRect().width - 200;
- const elWidth = this.$el.getBoundingClientRect().width;
- const menuItemNodes = this.$el.children;
- const menuWidth = Array.from(menuItemNodes).map(
- (i) => i.getBoundingClientRect().width
- );
- this.visibleNumber = (
- parseInt(width - elWidth) / parseInt(menuWidth)
- ).toFixed(0);
+ const width = document.body.getBoundingClientRect().width / 3;
+ this.visibleNumber = parseInt(width / 85);
},
// 菜单选择事件
handleSelect(key, keyPath) {
- if (key.indexOf("http://") !== -1 || key.indexOf("https://") !== -1) {
+ this.currentIndex = key;
+ const route = this.routers.find(item => item.path === key);
+ if (this.ishttp(key)) {
// http(s):// 路径新窗口打开
window.open(key, "_blank");
+ } else if (!route || !route.children) {
+ // 没有子路由路径内部打开
+ this.$router.push({ path: key });
+ this.$store.dispatch('app/toggleSideBarHide', true);
} else {
+ // 显示左侧联动菜单
this.activeRoutes(key);
+ this.$store.dispatch('app/toggleSideBarHide', false);
}
},
// 当前激活的路由
@@ -118,26 +145,41 @@
}
});
}
- this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
+ if(routes.length > 0) {
+ this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
+ } else {
+ this.$store.dispatch('app/toggleSideBarHide', true);
+ }
},
+ ishttp(url) {
+ return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
+ }
},
};
</script>
-<style lang="scss" scoped>
-.el-menu--horizontal > .el-menu-item {
+<style lang="scss">
+.topmenu-container.el-menu--horizontal > .el-menu-item {
float: left;
- height: 50px;
- line-height: 50px;
- margin: 0;
- border-bottom: 3px solid transparent;
- color: #999093;
- padding: 0 5px;
- margin: 0 10px;
+ height: 50px !important;
+ line-height: 50px !important;
+ color: #999093 !important;
+ padding: 0 5px !important;
+ margin: 0 10px !important;
}
-.el-menu--horizontal > .el-menu-item.is-active {
- border-bottom: 3px solid #409eff;
+.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+ border-bottom: 2px solid #{'var(--theme)'} !important;
color: #303133;
}
+
+/* submenu item */
+.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
+ float: left;
+ height: 50px !important;
+ line-height: 50px !important;
+ color: #999093 !important;
+ padding: 0 5px !important;
+ margin: 0 10px !important;
+}
</style>
--
Gitblit v1.9.2