mirror of
https://github.com/yangzongzhuan/RuoYi-Vue3.git
synced 2026-02-27 01:01:11 +08:00
107 lines
3.2 KiB
Vue
107 lines
3.2 KiB
Vue
<template>
|
|
<el-menu class="topbar-menu" :ellipsis="false" :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-sub-menu index="more" class="el-sub-menu__hide-arrow" v-if="moreRoutes.length > 0">
|
|
<template #title>
|
|
<span>更多菜单</span>
|
|
</template>
|
|
<sidebar-item :key="route.path + index" v-for="(route, index) in moreRoutes" :item="route" :base-path="route.path" />
|
|
</el-sub-menu>
|
|
</el-menu>
|
|
</template>
|
|
|
|
<script setup>
|
|
import SidebarItem from '../Sidebar/SidebarItem'
|
|
import useAppStore from '@/store/modules/app'
|
|
import useSettingsStore from '@/store/modules/settings'
|
|
import usePermissionStore from '@/store/modules/permission'
|
|
|
|
const route = useRoute()
|
|
const appStore = useAppStore()
|
|
const settingsStore = useSettingsStore()
|
|
const permissionStore = usePermissionStore()
|
|
|
|
const sidebarRouters = computed(() => permissionStore.sidebarRouters)
|
|
const theme = computed(() => settingsStore.theme)
|
|
const device = computed(() => appStore.device)
|
|
const activeMenu = computed(() => {
|
|
const { meta, path } = route
|
|
if (meta.activeMenu) {
|
|
return meta.activeMenu
|
|
}
|
|
return path
|
|
})
|
|
|
|
const visibleNumber = ref(5)
|
|
const topMenus = computed(() => {
|
|
return permissionStore.sidebarRouters.filter((f) => !f.hidden).slice(0, visibleNumber.value)
|
|
})
|
|
const moreRoutes = computed(() => {
|
|
return permissionStore.sidebarRouters.filter((f) => !f.hidden).slice(visibleNumber.value, sidebarRouters.value.length - visibleNumber.value)
|
|
})
|
|
function setVisibleNumber() {
|
|
const width = document.body.getBoundingClientRect().width / 3
|
|
visibleNumber.value = parseInt(width / 85)
|
|
}
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('resize', setVisibleNumber)
|
|
})
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('resize', setVisibleNumber)
|
|
})
|
|
|
|
onMounted(() => {
|
|
setVisibleNumber()
|
|
})
|
|
</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-sub-menu.is-active .svg-icon, .el-menu-item.is-active .svg-icon + span, .el-sub-menu.is-active .svg-icon + span, .el-sub-menu.is-active .el-sub-menu__title span {
|
|
color: v-bind(theme);
|
|
}
|
|
|
|
/* sub-menu item */
|
|
.topbar-menu.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
|
|
float: left;
|
|
height: 62px !important;
|
|
line-height: 50px !important;
|
|
color: #303133 !important;
|
|
padding: 0 5px !important;
|
|
margin: 0 20px -4px!important;
|
|
}
|
|
|
|
/* 背景色隐藏 */
|
|
.topbar-menu.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .topbar-menu.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .topbar-menu.el-menu--horizontal>.el-submenu .el-submenu__title:hover {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
/* 图标右间距 */
|
|
.topbar-menu .svg-icon {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
/* topbar more arrow */
|
|
.topbar-menu .el-sub-menu .el-sub-menu__icon-arrow {
|
|
position: static;
|
|
margin-left: 8px;
|
|
margin-top: 0px;
|
|
display: block !important;
|
|
}
|
|
|
|
/* menu__title el-menu-item */
|
|
.topbar-menu.el-menu--horizontal .el-sub-menu__title, .topbar-menu.el-menu--horizontal .el-menu-item {
|
|
height: 60px;
|
|
}
|
|
</style>
|