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

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