xinyin025/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-11-04 07:43:42 +08:00
Code Issues 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
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> <template>
<div style="flex: 1; overflow: hidden; padding: 0 10px"> <div class="flex-1-hidden h-full px-10px">
<n-scrollbar :x-scrollable="true" class="flex-1-hidden"> <n-scrollbar :x-scrollable="true" class="flex-1-hidden h-full" content-class="h-full">
<n-menu <div class="flex-y-center h-full">
:value="activeKey" <n-menu
mode="horizontal" :value="activeKey"
:options="menus" mode="horizontal"
:inverted="theme.header.inverted" :options="menus"
@update:value="handleUpdateMenu" :inverted="theme.header.inverted"
/> @update:value="handleUpdateMenu"
/>
</div>
</n-scrollbar> </n-scrollbar>
</div> </div>
</template> </template>
@@ -33,20 +35,7 @@ function handleUpdateMenu(_key: string, item: MenuOption) {
} }
</script> </script>
<style lang="scss" scoped> <style 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;
}
:deep(.n-menu-item-content-header) { :deep(.n-menu-item-content-header) {
overflow: inherit !important; overflow: inherit !important;
} }