From 12a608cd4231f29d0ae088a8d13d0a8e92ddb92a Mon Sep 17 00:00:00 2001
From: xumi <hmxing1105@163.com>
Date: Tue, 15 Feb 2022 23:54:52 +0800
Subject: [PATCH] =?UTF-8?q?[=E4=BF=AE=E5=A4=8D]=E6=A8=AA=E5=90=91=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E8=8F=9C=E5=8D=95=E5=AD=90=E8=8F=9C=E5=8D=95=E5=91=88?=
 =?UTF-8?q?=E7=8E=B0=E4=BD=8D=E7=BD=AE=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/menu.md | 16 ++++++++++------
 src/component/menu/index.less         |  8 +++++++-
 src/component/subMenu/index.vue       | 26 +++++++++++++++++++++++++-
 3 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/example/docs/zh-CN/components/menu.md b/example/docs/zh-CN/components/menu.md
index 1c0b36f1..52b09a8e 100644
--- a/example/docs/zh-CN/components/menu.md
+++ b/example/docs/zh-CN/components/menu.md
@@ -18,12 +18,16 @@
     <lay-menu-item title="用户" id="2"></lay-menu-item>
     <lay-menu-item title="角色" id="3"></lay-menu-item> 
     <lay-sub-menu title="目录" id="7">
-        <lay-menu-item title="菜单" id="8"></lay-menu-item> 
-        <lay-menu-item title="菜单" id="9"></lay-menu-item>
-        <lay-sub-menu title="菜单" id="10">
-            <lay-menu-item title="菜单" id="11"></lay-menu-item> 
-            <lay-menu-item title="菜单" id="12"></lay-menu-item>
-            <lay-menu-item title="菜单" id="13"></lay-menu-item>
+        <lay-menu-item title="菜单1" id="8"></lay-menu-item> 
+        <lay-menu-item title="菜单2" id="9"></lay-menu-item>
+        <lay-sub-menu title="菜单3" id="10">
+            <lay-menu-item title="菜单3-1" id="11"></lay-menu-item> 
+            <lay-menu-item title="菜单3-2" id="12"></lay-menu-item>
+            <lay-sub-menu title="菜单3-3" id="13">
+              <lay-menu-item title="菜单3-3-1" id="14"></lay-menu-item> 
+              <lay-menu-item title="菜单3-3-2" id="15"></lay-menu-item>
+              <lay-menu-item title="菜单3-3-3" id="16"></lay-menu-item>
+          </lay-sub-menu>
         </lay-sub-menu>
     </lay-sub-menu> 
   </lay-menu>
diff --git a/src/component/menu/index.less b/src/component/menu/index.less
index 4e9f6ad7..24ec14cd 100644
--- a/src/component/menu/index.less
+++ b/src/component/menu/index.less
@@ -2,7 +2,13 @@
 
 .layui-nav .layui-show.layui-anim-upbit .layui-show.layui-anim-upbit {
   top: 0px;
-  left: 94px;
+  left: calc(100% + 5px);
+}
+
+.layui-nav .layui-show.layui-anim-upbit .left-nav.layui-show.layui-anim-upbit
+, .layui-nav .layui-show.layui-anim-upbit .left-nav .layui-show.layui-anim-upbit {
+  top: 0px;
+  left: calc(-100% - 20px);
 }
 
 .layui-nav .layui-show.layui-anim-upbit .layui-nav-item {
diff --git a/src/component/subMenu/index.vue b/src/component/subMenu/index.vue
index e273de3c..6b6e2100 100644
--- a/src/component/subMenu/index.vue
+++ b/src/component/subMenu/index.vue
@@ -5,7 +5,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, inject, Ref, useSlots } from "vue";
+import { computed, inject, onBeforeUnmount, ref, Ref, useSlots, watch } from "vue";
 
 export interface LaySubMenuProps {
   id: string;
@@ -31,6 +31,28 @@ 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) {
+    return;
+  }
+  const offsetWidth = layuiNavChild.value.offsetWidth;
+  if (window.innerWidth < layuiNavChild.value.getBoundingClientRect().left + offsetWidth + 10) {
+    position.value = 'left-nav';
+  } else {
+    position.value = '';
+  }
+}
+window.addEventListener('resize', setPosition);
+onBeforeUnmount(()=>window.removeEventListener('resize', setPosition));
 </script>
 
 <template>
@@ -48,7 +70,9 @@ const isOpen = computed(() => {
     </a>
     <dl
       class="layui-nav-child"
+      ref="layuiNavChild"
       :class="[
+        position,
         isOpen && !isTree ? 'layui-show' : '',
         !isTree ? 'layui-anim layui-anim-upbit' : '',
       ]"