[修复]横向导航菜单子菜单呈现位置问题

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="菜单1" id="8"></lay-menu-item> 
-        <lay-menu-item title="菜单" id="9"></lay-menu-item>
+        <lay-menu-item title="菜单2" id="9"></lay-menu-item>
-        <lay-sub-menu title="菜单" id="10">
+        <lay-sub-menu title="菜单3" id="10">
-            <lay-menu-item title="菜单" id="11"></lay-menu-item> 
+            <lay-menu-item title="菜单3-1" id="11"></lay-menu-item> 
-            <lay-menu-item title="菜单" id="12"></lay-menu-item>
+            <lay-menu-item title="菜单3-2" id="12"></lay-menu-item>
-            <lay-menu-item title="菜单" id="13"></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>

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 {

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' : '',
       ]"