Browse Source

Revert "优化"

This reverts commit b900bd919d611814754a420133ae4bc46b1c5a21.
xiaochan 1 year ago
parent
commit
7bbd9599b6
1 changed files with 28 additions and 23 deletions
  1. 28 23
      src/layout/MenuV2/MenuV2.vue

+ 28 - 23
src/layout/MenuV2/MenuV2.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="floating">
-    <div>
+  <div class="floating" ref="floatingRef">
+    <div ref="logoRef">
       <Logo/>
     </div>
     <div style="height: 30px; padding: 0 8px 8px 8px" @click="expandMenu" id="tutorial_search_menu">
@@ -11,23 +11,20 @@
                 @input="searchInput"
                 placeholder="菜单太难找?在这里搜索。"/>
     </div>
-    <div style="flex: 1;height: 0">
-      <el-scrollbar>
-        <el-menu
-            v-if="rendering"
-            ref="menuRef"
-            router
-            :collapse-transition="false"
-            :collapse="isCollapse"
-            :default-active="isSearch ? '' : activeMenu"
-            :unique-opened="isSearch ? false : expandOneMenu">
-          <menu-item-v2 v-for="item in isSearch ? searchData : menuData"
-                        :data="item"
-                        :menuText="menuText"/>
-        </el-menu>
-      </el-scrollbar>
-    </div>
-
+    <el-scrollbar :style="barHeight">
+      <el-menu
+          v-if="rendering"
+          ref="menuRef"
+          router
+          :collapse-transition="false"
+          :collapse="isCollapse"
+          :default-active="isSearch ? '' : activeMenu"
+          :unique-opened="isSearch ? false : expandOneMenu">
+        <menu-item-v2 v-for="item in isSearch ? searchData : menuData"
+                      :data="item"
+                      :menuText="menuText"/>
+      </el-menu>
+    </el-scrollbar>
   </div>
 </template>
 
@@ -47,8 +44,10 @@ import {getUserMenu} from "@/api/settings/menu-settings";
 
 const menuText: Ref<string> = ref('')
 const menuRef = useCompRef(ElMenu)
+
 const menuData = ref(routerMenus.value)
 const rendering = ref(true)
+
 const isSearch = ref<boolean>(false)
 const searchData = ref([])
 
@@ -57,6 +56,7 @@ const searchActives = new Set()
 const searchInput: (val: string) => void = XEUtils.debounce(async (val: string) => {
   menuText.value = val;
   searchActives.clear();
+
   if (val) {
     searchData.value = treeSearch<{ metaTitle: string; }>(menuData.value, (item) => {
       const metaTitle: string = item.metaTitle
@@ -113,7 +113,13 @@ const expandMenu = () => {
   }
 }
 
+const logoRef: Ref<HTMLHtmlElement | null> = ref(null)
 const searchRef: Ref<HTMLHeadElement | null> = ref(null)
+const floatingRef: Ref<HTMLHtmlElement | null> = ref(null)
+
+const barHeight = reactive({
+  height: ''
+})
 
 const activeMenu = computed<string>(() => {
   const {meta, path} = route
@@ -127,7 +133,7 @@ const smoothScrolling = () => {
   const routerPath = document.getElementById(router.currentRoute.value.fullPath)
   if (!routerPath) return
   routerPath.scrollIntoView({
-    block: 'center',
+    block: 'start',
     inline: 'nearest',
     behavior: 'smooth'
   })
@@ -144,8 +150,9 @@ watch(() => router.currentRoute.value, async () => {
 
 
 onMounted(async () => {
-  menuData.value = await getUserMenu()
   await nextTick()
+  menuData.value = await getUserMenu()
+  barHeight.height = (floatingRef.value.clientHeight - logoRef.value.clientHeight - 36) + 'px'
   await sleep(500)
   smoothScrolling()
 })
@@ -157,8 +164,6 @@ onMounted(async () => {
   height: 100%;
   width: 100%;
   background-color: var(--el-menu-bg-color);
-  display: flex;
-  flex-direction: column;
 
   .el-menu {
     border-right: 0 !important;