feat(projects): 上下结构，菜单支持横向滚动

soybeanjs · Jun 9, 2022 · 808051b · 808051b
1 parent 906aed5
commit 808051b
Showing 1 changed file with 29 additions and 8 deletions.
diff --git a/src/layouts/common/GlobalHeader/components/HeaderMenu.vue b/src/layouts/common/GlobalHeader/components/HeaderMenu.vue
@@ -1,11 +1,15 @@
 <template>
-  <n-menu
-    :value="activeKey"
-    mode="horizontal"
-    :options="menus"
-    :inverted="theme.header.inverted"
-    @update:value="handleUpdateMenu"
-  />
+  <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"
+      />
+    </n-scrollbar>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -29,4 +33,21 @@ function handleUpdateMenu(_key: string, item: MenuOption) {
 }
 </script>
 
-<style scoped></style>
+<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;
+}
+:deep(.n-menu-item-content-header) {
+  overflow: inherit !important;
+}
+</style>