fix:修复左侧菜单混合模式中，固定展开菜单问题(#204) (#238)

* fix:修复左侧菜单混合模式中，固定展开菜单问题(#204) Signed-off-by: aonoa <1991849113@qq.com> * chore:删除日志打印 Signed-off-by: aonoa <1991849113@qq.com> --------- Signed-off-by: aonoa <1991849113@qq.com>
vbenjs · Nov 1, 2023 · de399dc · de399dc
1 parent 4934305
commit de399dc
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/packages/hooks/src/setting/useMenuSetting.ts b/packages/hooks/src/setting/useMenuSetting.ts
@@ -157,7 +157,7 @@ export function useMenuSetting() {
   })
 
   const getIsFixed = computed(() => {
-    return unref(getMixSideFixed) && unref(mixSideHasChildren)
+    return unref(getMixSideFixed)// && unref(mixSideHasChildren)
   })
 
   // Set menu configuration

diff --git a/packages/layouts/src/components/mixSideBar/Menu.vue b/packages/layouts/src/components/mixSideBar/Menu.vue
@@ -57,6 +57,8 @@ const childrenMenus = ref<Menu[]>([])
 const openMenu = ref(false)
 const sideRef = ref<ElRef>(null)
 const childrenTitle = ref('')
+let oldIsFixed = unref(getIsFixed)
+let pushpin = unref(getIsFixed)
 
 onMounted(async () => {
   menuModules.value = await getShallowMenus()
@@ -84,7 +86,7 @@ const handleModuleClick = async (path: string, hover = false, title = '') => {
       }
     }
     if (!unref(openMenu)) {
-      setActive()
+      await setActive()
     }
   } else {
     openMenu.value = true
@@ -101,6 +103,17 @@ const handleModuleClick = async (path: string, hover = false, title = '') => {
 }
 
 const getMenuStyle = computed((): CSSProperties => {
+  if (getIsFixed.value) {
+    setActive(true)
+  } else {
+    if (oldIsFixed != unref(getIsFixed) && !pushpin) {
+      closeMenu()
+    } else {
+      pushpin = false
+    }
+  }
+  oldIsFixed = unref(getIsFixed)
+
   return {
     width: unref(openMenu) ? `${unref(getMenuWidth)}px` : 0,
     left: `${props.mixSidebarWidth}px`,
@@ -185,6 +198,7 @@ const handleFixedMenu = () => {
   setMenuSetting({
     mixSideFixed: !unref(getIsFixed),
   })
+  pushpin = !unref(getIsFixed);
 }
 </script>