新增菜单导航显示风格TopNav(false为左侧导航菜单,true为顶部导航菜单)

This commit is contained in:
RuoYi 2021-04-12 09:54:08 +08:00
parent 5f2350569a
commit 9aac65ff32
9 changed files with 204 additions and 8 deletions

View File

@ -176,6 +176,12 @@
color: #FFFFFF; color: #FFFFFF;
} }
/* submenu item */
.el-menu--horizontal > .el-submenu .el-submenu__title {
height: 50px !important;
line-height: 50px !important;
}
/* text color */ /* text color */
.text-navy { .text-navy {
color: #1ab394; color: #1ab394;

View File

@ -135,9 +135,6 @@
margin-left: 20px; margin-left: 20px;
} }
.el-submenu__icon-arrow {
display: none;
}
} }
} }

View File

@ -0,0 +1,143 @@
<template>
<el-menu
:default-active="activeMenu"
mode="horizontal"
@select="handleSelect"
>
<template v-for="(item, index) in topMenus">
<el-menu-item :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">
<template slot="title">更多菜单</template>
<template v-for="(item, index) in topMenus">
<el-menu-item
: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>
</el-menu>
</template>
<script>
import { constantRoutes } from "@/router";
export default {
data() {
return {
//
visibleNumber: 5,
//
isFrist: false,
};
},
computed: {
//
topMenus() {
return this.routers.map((menu) => ({
...menu,
children: undefined,
}));
},
//
routers() {
return this.$store.state.permission.topbarRouters;
},
//
childrenMenus() {
var childrenMenus = [];
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;
router.children[item].parentPath = router.path;
}
childrenMenus.push(router.children[item]);
}
});
return constantRoutes.concat(childrenMenus);
},
//
activeMenu() {
const path = this.$route.path;
let activePath = this.routers[0].path;
if (path.lastIndexOf("/") > 0) {
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";
}
}
this.activeRoutes(activePath);
return activePath;
},
},
mounted() {
this.setVisibleNumber();
},
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);
},
//
handleSelect(key, keyPath) {
if (key.indexOf("http://") !== -1 || key.indexOf("https://") !== -1) {
// http(s)://
window.open(key, "_blank");
} else {
this.activeRoutes(key);
}
},
//
activeRoutes(key) {
var routes = [];
if (this.childrenMenus && this.childrenMenus.length > 0) {
this.childrenMenus.map((item) => {
if (key == item.parentPath || (key == "index" && "" == item.path)) {
routes.push(item);
}
});
}
this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
},
},
};
</script>
<style lang="scss" scoped>
.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;
}
.el-menu--horizontal > .el-menu-item.is-active {
border-bottom: 3px solid #409eff;
color: #303133;
}
</style>

View File

@ -2,7 +2,8 @@
<div class="navbar"> <div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
<top-nav id="topmenu-container" class="breadcrumb-container" v-if="topNav"/>
<div class="right-menu"> <div class="right-menu">
<template v-if="device!=='mobile'"> <template v-if="device!=='mobile'">
@ -48,6 +49,7 @@
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb' import Breadcrumb from '@/components/Breadcrumb'
import TopNav from '@/components/TopNav'
import Hamburger from '@/components/Hamburger' import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull' import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect' import SizeSelect from '@/components/SizeSelect'
@ -58,6 +60,7 @@ import RuoYiDoc from '@/components/RuoYi/Doc'
export default { export default {
components: { components: {
Breadcrumb, Breadcrumb,
TopNav,
Hamburger, Hamburger,
Screenfull, Screenfull,
SizeSelect, SizeSelect,
@ -81,6 +84,11 @@ export default {
value: val value: val
}) })
} }
},
topNav: {
get() {
return this.$store.state.settings.topNav
}
} }
}, },
methods: { methods: {

View File

@ -42,6 +42,11 @@
<h3 class="drawer-title">系统布局配置</h3> <h3 class="drawer-title">系统布局配置</h3>
<div class="drawer-item">
<span>开启 TopNav</span>
<el-switch v-model="topNav" class="drawer-switch" />
</div>
<div class="drawer-item"> <div class="drawer-item">
<span>开启 Tags-Views</span> <span>开启 Tags-Views</span>
<el-switch v-model="tagsView" class="drawer-switch" /> <el-switch v-model="tagsView" class="drawer-switch" />
@ -87,6 +92,20 @@ export default {
}) })
} }
}, },
topNav: {
get() {
return this.$store.state.settings.topNav
},
set(val) {
this.$store.dispatch('settings/changeSetting', {
key: 'topNav',
value: val
})
if (!val) {
this.$store.commit("SET_SIDEBAR_ROUTERS", this.$store.state.permission.defaultRoutes);
}
}
},
tagsView: { tagsView: {
get() { get() {
return this.$store.state.settings.tagsView return this.$store.state.settings.tagsView

View File

@ -11,6 +11,11 @@ module.exports = {
*/ */
showSettings: false, showSettings: false,
/**
* 是否显示顶部导航
*/
topNav: true,
/** /**
* 是否显示 tagsView * 是否显示 tagsView
*/ */

View File

@ -11,6 +11,8 @@ const getters = {
roles: state => state.user.roles, roles: state => state.user.roles,
permissions: state => state.user.permissions, permissions: state => state.user.permissions,
permission_routes: state => state.permission.routes, permission_routes: state => state.permission.routes,
topbarRouters:state => state.permission.topbarRouters,
defaultRoutes:state => state.permission.defaultRoutes,
sidebarRouters:state => state.permission.sidebarRouters, sidebarRouters:state => state.permission.sidebarRouters,
} }
export default getters export default getters

View File

@ -7,6 +7,8 @@ const permission = {
state: { state: {
routes: [], routes: [],
addRoutes: [], addRoutes: [],
defaultRoutes: [],
topbarRouters: [],
sidebarRouters: [] sidebarRouters: []
}, },
mutations: { mutations: {
@ -14,8 +16,19 @@ const permission = {
state.addRoutes = routes state.addRoutes = routes
state.routes = constantRoutes.concat(routes) state.routes = constantRoutes.concat(routes)
}, },
SET_SIDEBAR_ROUTERS: (state, routers) => { SET_DEFAULT_ROUTES: (state, routes) => {
state.sidebarRouters = constantRoutes.concat(routers) state.defaultRoutes = constantRoutes.concat(routes)
},
SET_TOPBAR_ROUTES: (state, routes) => {
// 顶部导航菜单默认添加统计报表栏指向首页
const index = [{
path: 'index',
meta: { title: '统计报表', icon: 'dashboard'}
}]
state.topbarRouters = routes.concat(index);
},
SET_SIDEBAR_ROUTERS: (state, routes) => {
state.sidebarRouters = routes
}, },
}, },
actions: { actions: {
@ -30,7 +43,9 @@ const permission = {
const rewriteRoutes = filterAsyncRouter(rdata, false, true) const rewriteRoutes = filterAsyncRouter(rdata, false, true)
rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true }) rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
commit('SET_ROUTES', rewriteRoutes) commit('SET_ROUTES', rewriteRoutes)
commit('SET_SIDEBAR_ROUTERS', sidebarRoutes) commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
commit('SET_DEFAULT_ROUTES', sidebarRoutes)
commit('SET_TOPBAR_ROUTES', sidebarRoutes)
resolve(rewriteRoutes) resolve(rewriteRoutes)
}) })
}) })

View File

@ -1,12 +1,13 @@
import variables from '@/assets/styles/element-variables.scss' import variables from '@/assets/styles/element-variables.scss'
import defaultSettings from '@/settings' import defaultSettings from '@/settings'
const { sideTheme, showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo } = defaultSettings
const state = { const state = {
theme: variables.theme, theme: variables.theme,
sideTheme: sideTheme, sideTheme: sideTheme,
showSettings: showSettings, showSettings: showSettings,
topNav: topNav,
tagsView: tagsView, tagsView: tagsView,
fixedHeader: fixedHeader, fixedHeader: fixedHeader,
sidebarLogo: sidebarLogo sidebarLogo: sidebarLogo