RuoYi
3 months ago
10 changed files with 343 additions and 95 deletions
@ -0,0 +1,108 @@ |
|||
<template> |
|||
<el-menu class="topbar-menu" :default-active="activeMenu" :active-text-color="theme" mode="horizontal"> |
|||
<sidebar-item :key="route.path + index" v-for="(route, index) in topMenus" :item="route" :base-path="route.path" /> |
|||
|
|||
<el-submenu index="more" class="el-submenu__hide-arrow" v-if="moreRoutes.length > 0"> |
|||
<template slot="title">更多菜单</template> |
|||
<sidebar-item :key="route.path + index" v-for="(route, index) in moreRoutes" :item="route" :base-path="route.path" /> |
|||
</el-submenu> |
|||
</el-menu> |
|||
</template> |
|||
|
|||
<script> |
|||
import SidebarItem from '../Sidebar/SidebarItem' |
|||
|
|||
export default { |
|||
components: { SidebarItem }, |
|||
data() { |
|||
return { |
|||
// 顶部栏初始数 |
|||
visibleNumber: 5 |
|||
} |
|||
}, |
|||
computed: { |
|||
theme() { |
|||
return this.$store.state.settings.theme |
|||
}, |
|||
topMenus() { |
|||
return this.$store.state.permission.sidebarRouters.filter((f) => !f.hidden).slice(0, this.visibleNumber) |
|||
}, |
|||
moreRoutes() { |
|||
const sidebarRouters = this.$store.state.permission.sidebarRouters; |
|||
return sidebarRouters.filter((f) => !f.hidden).slice(this.visibleNumber, sidebarRouters.length - this.visibleNumber) |
|||
}, |
|||
// 默认激活的菜单 |
|||
activeMenu() { |
|||
const { meta, path } = this.$route |
|||
if (meta.activeMenu) { |
|||
return meta.activeMenu |
|||
} |
|||
return path |
|||
}, |
|||
}, |
|||
beforeMount() { |
|||
window.addEventListener('resize', this.setVisibleNumber) |
|||
}, |
|||
beforeDestroy() { |
|||
window.removeEventListener('resize', this.setVisibleNumber) |
|||
}, |
|||
mounted() { |
|||
this.setVisibleNumber() |
|||
}, |
|||
methods: { |
|||
// 根据宽度计算设置显示栏数 |
|||
setVisibleNumber() { |
|||
const width = document.body.getBoundingClientRect().width / 3 |
|||
this.visibleNumber = parseInt(width / 85) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.topbar-menu.el-menu--horizontal > .el-menu-item { |
|||
float: left; |
|||
height: 50px !important; |
|||
line-height: 50px !important; |
|||
color: #303133 !important; |
|||
padding: 0 5px !important; |
|||
margin: 0 10px !important; |
|||
} |
|||
|
|||
.el-menu-item.is-active .svg-icon + span, .el-submenu.is-active .svg-icon + span{ |
|||
color: v-bind(theme); |
|||
} |
|||
|
|||
.el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title { |
|||
color: #303133 !important; |
|||
} |
|||
|
|||
/* submenu item */ |
|||
.topbar-menu.el-menu--horizontal > .el-submenu .el-submenu__title { |
|||
float: left; |
|||
height: 50px !important; |
|||
line-height: 50px !important; |
|||
color: #303133 !important; |
|||
padding: 0 5px !important; |
|||
margin: 0 10px !important; |
|||
} |
|||
|
|||
/* 图标右间距 */ |
|||
.topbar-menu .svg-icon { |
|||
margin-right: 4px; |
|||
} |
|||
|
|||
/* topbar more arrow */ |
|||
.topbar-menu .el-submenu .el-submenu__icon-arrow { |
|||
position: static; |
|||
vertical-align: middle; |
|||
margin-left: 8px; |
|||
margin-top: 0px; |
|||
} |
|||
|
|||
/* menu__title el-menu-item */ |
|||
.topbar-menu.el-menu--horizontal .el-submenu__title, .topbar-menu.el-menu--horizontal .el-menu-item { |
|||
height: 55px; |
|||
padding: 0 15px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue