GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(projects): 优化菜单支持横向滚动

Browse Source 
ISSUES CLOSED: #76
This commit is contained in:
Soybean 2022-06-10 00:41:20 +08:00
parent 808051b29d
commit 8f3e855f41
1 changed files with 12 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/layouts/common/GlobalHeader/components/HeaderMenu.vue
View File

@ -1,13 +1,15 @@
<template>
<div style="flex: 1; overflow: hidden; padding: 0 10px">
<n-scrollbar :x-scrollable="true" class="flex-1-hidden">
<n-menu
:value="activeKey"
mode="horizontal"
:options="menus"
:inverted="theme.header.inverted"
@update:value="handleUpdateMenu"
/>
<div class="flex-1-hidden h-full px-10px">
<n-scrollbar :x-scrollable="true" class="flex-1-hidden h-full" content-class="h-full">
<div class="flex-y-center h-full">
<n-menu
:value="activeKey"
mode="horizontal"
:options="menus"
:inverted="theme.header.inverted"
@update:value="handleUpdateMenu"
/>
</div>
</n-scrollbar>
</div>
</template>
@ -33,20 +35,7 @@ function handleUpdateMenu(_key: string, item: MenuOption) {
}
</script>
<style lang="scss" scoped>
:deep(.n-menu-item-content__icon) {
font-size: 16px !important;
}
:deep(.n-menu .n-menu-item) {
margin-top: 0;
// margin-bottom: 5px;
}
:deep(.n-menu .n-menu-item::before) {
left: 0;
right: 0;
border-radius: 3px;
margin: 0 5px;
}
<style scoped>
:deep(.n-menu-item-content-header) {
overflow: inherit !important;
}