RuoYi
3 months ago
10 changed files with 276 additions and 33 deletions
@ -0,0 +1,106 @@ |
|||
<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> |
|||
Loading…
Reference in new issue