fix: 横向导航栏模式下 children 无法自动隐藏

src/component/dropdown/index.vue

@@ -5,8 +5,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { provide, ref, watch } from "vue"
-import { onClickOutside } from "@vueuse/core"
+import { provide, ref, watch } from "vue";
+import { onClickOutside } from "@vueuse/core";
 
 export interface LayDropdownProps {
   trigger?: string;
@@ -19,8 +19,8 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
 });
 
 onClickOutside(dropdownRef, (event) => {
-   openState.value = false;
-})
+  openState.value = false;
+});
 
 const openState = ref(false);
 

src/component/select/index.vue

@@ -34,7 +34,7 @@ const selectRef = ref<null | HTMLElement>(null);
 
 onClickOutside(selectRef, (event) => {
   openState.value = false;
-})
+});
 
 const props = withDefaults(defineProps<LaySelectProps>(), {
   modelValue: null,

src/component/subMenu/index.vue

@@ -14,6 +14,7 @@ import {
   useSlots,
   watch,
 } from "vue";
+import { onClickOutside } from "@vueuse/core";
 
 export interface LaySubMenuProps {
   id: string;
@@ -24,10 +25,23 @@ const slots = useSlots();
 
 const props = defineProps<LaySubMenuProps>();
 
-const isTree = inject("isTree");
+const isTree: Ref<boolean> = inject("isTree") as Ref<boolean>;
 const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
 const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
 
+const isOpen = computed(() => {
+  return openKeys.value.includes(props.id);
+});
+
+const subMenuRef = ref<HTMLElement>();
+const position = ref<String>();
+
+watch(isOpen, () => {
+  if (isOpen.value && position.value !== "left-nav") {
+    setTimeout(setPosition, 0);
+  }
+});
+
 const openHandle = function () {
   if (openKeys.value.includes(props.id)) {
     openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
@@ -36,32 +50,30 @@ const openHandle = function () {
   }
 };
 
-const isOpen = computed(() => {
-  return openKeys.value.includes(props.id);
-});
-
-// 菜单显示位置
-const layuiNavChild = ref<HTMLElement>();
-const position = ref<String>();
-watch(isOpen, () => {
-  if (isOpen.value && position.value !== "left-nav") {
-    setTimeout(setPosition, 0);
-  }
-});
 const setPosition = function () {
-  if (!isTree || !layuiNavChild.value) {
+  if (!isTree.value || !subMenuRef.value) {
     return;
   }
-  const offsetWidth = layuiNavChild.value.offsetWidth;
+  const offsetWidth = subMenuRef.value.offsetWidth;
   if (
     window.innerWidth <
-    layuiNavChild.value.getBoundingClientRect().left + offsetWidth + 10
+    subMenuRef.value.getBoundingClientRect().left + offsetWidth + 10
   ) {
     position.value = "left-nav";
   } else {
     position.value = "";
   }
 };
+
+onClickOutside(subMenuRef, (event: PointerEvent) => {
+  if (!isTree.value) {
+    let index = openKeys.value.indexOf(props.id);
+    if (index != -1) {
+      openKeys.value.splice(index, 1);
+    }
+  }
+});
+
 window.addEventListener("resize", setPosition);
 onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
 </script>
@@ -81,7 +93,7 @@ onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
     </a>
     <dl
       class="layui-nav-child"
-      ref="layuiNavChild"
+      ref="subMenuRef"
       :class="[
         position,
         isOpen && !isTree ? 'layui-show' : '',