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

example/docs/zh-CN/components/menu.md

@@ -13,7 +13,7 @@
 ::: demo
 
 <template>
-  <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys">
+  <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys1">
     <lay-menu-item title="首页" id="1"></lay-menu-item>
     <lay-menu-item title="用户" id="2"></lay-menu-item>
     <lay-menu-item title="角色" id="3"></lay-menu-item> 
@@ -40,10 +40,10 @@ export default {
   setup() {
 
     const selectedKey = ref("5")
-    const openKeys = ref(["7"])   
+    const openKeys1 = ref(["7"])   
     return {
       selectedKey,
-      openKeys
+      openKeys1
     }
   }
 }
@@ -57,7 +57,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" :tree="true">
+  <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys2" :tree="true">
     <lay-menu-item title="首页" id="1"></lay-menu-item>
     <lay-menu-item title="用户" id="2"></lay-menu-item>
     <lay-menu-item title="角色" id="3"></lay-menu-item> 
@@ -79,11 +79,11 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-    const openKeys = ref(["7"])
+    const openKeys2 = ref(["7"])
     const selectedKey = ref("5")
 
     return {
-      openKeys,
+      openKeys2,
       selectedKey
     }
   }
@@ -98,7 +98,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-menu level="true" v-model:selectedKey="selectedKey" inverted="true" v-model:openKeys="openKeys" :tree="true">
+  <lay-menu level="true" v-model:selectedKey="selectedKey" inverted="true" v-model:openKeys="openKeys3" :tree="true">
     <lay-menu-item title="首页" id="1"></lay-menu-item>
     <lay-menu-item title="用户" id="2"></lay-menu-item>
     <lay-menu-item title="角色" id="3"></lay-menu-item> 
@@ -120,11 +120,11 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-    const openKeys = ref(["7"])
+    const openKeys3 = ref(["7"])
     const selectedKey = ref("5")
 
     return {
-      openKeys,
+      openKeys3,
       selectedKey
     }
   }
@@ -139,7 +139,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-menu v-model:selectedKey="selectedKey" theme="light" v-model:openKeys="openKeys" :tree="true">
+  <lay-menu v-model:selectedKey="selectedKey" theme="light" v-model:openKeys="openKeys4" :tree="true">
     <lay-menu-item title="首页" id="1"></lay-menu-item>
     <lay-menu-item title="用户" id="2"></lay-menu-item>
     <lay-menu-item title="角色" id="3"></lay-menu-item> 
@@ -161,11 +161,11 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-    const openKeys = ref(["7"])
+    const openKeys4 = ref(["7"])
     const selectedKey = ref("5")
 
     return {
-      openKeys,
+      openKeys4,
       selectedKey
     }
   }
@@ -180,7 +180,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree">
+  <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys5" v-model:tree="isTree">
     <lay-menu-item id="1">
       <router-link to="">
         <lay-icon type="layui-icon-home"></lay-icon> 
@@ -218,11 +218,11 @@ export default {
 
     const isTree = ref(true)
     const selectedKey = ref("5")
-    const openKeys = ref(["7"])
+    const openKeys5 = ref(["7"])
 
     return {
       isTree,
-      openKeys,
+      openKeys5,
       selectedKey
     }
   }

example/docs/zh-CN/components/transfer.md

@@ -4,6 +4,12 @@
 ::: title 基础使用
 :::
 
+::: describe 常用于行数据的交互筛选，在浩瀚的业务需求中，值得一用。
+:::
+
+::: title 基础使用
+:::
+
 ::: demo 使用 `lay-transfer` 标签, 创建穿梭框
 
 <template>

example/docs/zh-CN/guide/theme.md

@@ -22,32 +22,31 @@ const themeVariable = {
 :::
 
 ```
---global-primary-color: #009688;
+--global-primary-color: #009688; // 主题色
 
---global-normal-color: #1e9fff;
+--global-normal-color: #1e9fff; // 通用色
 
---global-warm-color: #ffb800;
+--global-warm-color: #ffb800; // 警告色
 
---global-danger-color: #ff5722;
+--global-danger-color: #ff5722; // 危险色
 
---global-checked-color: #5fb878;
+--global-checked-color: #5fb878; // 选中色
 
---global-border-radius: 2px;
+--global-border-radius: 2px; // 圆角度
 
---global-neutral-color-1: #FAFAFA;
+--global-neutral-color-1: #FAFAFA; // 辅助色-1
 
---global-neutral-color-2: #F6F6F6;
+--global-neutral-color-2: #F6F6F6; // 辅助色-2
     
---global-neutral-color-3: #eeeeee;
+--global-neutral-color-3: #eeeeee; // 辅助色-3
     
---global-neutral-color-4: #e2e2e2;
+--global-neutral-color-4: #e2e2e2; // 辅助色-4
   
---global-neutral-color-5: #dddddd;
+--global-neutral-color-5: #dddddd; // 辅助色-5
   
---global-neutral-color-6: #d2d2d2;
+--global-neutral-color-6: #d2d2d2; // 辅助色-6
   
---global-neutral-color-7: #cccccc;
+--global-neutral-color-7: #cccccc; // 辅助色-7
-  
---global-neutral-color-8: #c2c2c2;
   
+--global-neutral-color-8: #c2c2c2; // 辅助色-8
 ```

src/component/dropdown/index.vue

@@ -5,8 +5,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { provide, ref, watch } from "vue"
+import { provide, ref, watch } from "vue";
-import { onClickOutside } from "@vueuse/core"
+import { onClickOutside } from "@vueuse/core";
 
 export interface LayDropdownProps {
   trigger?: string;
@@ -20,7 +20,7 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
 
 onClickOutside(dropdownRef, (event) => {
   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' : '',