theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
xumi 2022-02-15 23:54:52 +08:00
parent ba879de7c1
commit 12a608cd42
3 changed files with 42 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
example/docs/zh-CN/components/menu.md
View File

@ -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>

8
src/component/menu/index.less
View File

@ -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 {

26
src/component/subMenu/index.vue
View File

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