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

🐛(component): [menu]修复折叠时偶现闪烁的问题

Browse Source
This commit is contained in:
sight 2022-07-02 01:02:24 +08:00
parent 286398fc4d
commit f00064d509
3 changed files with 77 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package/component/src/component/subMenu/SubMenuPopup.vue
View File

@ -31,7 +31,7 @@ const isOpen = computed(() => {
class="layui-sub-menu-popup" class="layui-sub-menu-popup"
> >
<li :class="['layui-nav-item']"> <li :class="['layui-nav-item']">
<a href="javascript:void(0)" style="justify-content: space-between"> <a href="javascript:void(0)">
<div> <div>
<!-- 图标 --> <!-- 图标 -->
<i v-if="$slots.icon" class="layui-sub-menu-icon"> <i v-if="$slots.icon" class="layui-sub-menu-icon">
@ -52,7 +52,7 @@ const isOpen = computed(() => {
</span> </span>
</a> </a>
</li> </li>
<template #content class="layui-sub-menu-popup-content"> <template #content>
<slot></slot> <slot></slot>
</template> </template>
</lay-dropdown> </lay-dropdown>
@ -67,7 +67,7 @@ const isOpen = computed(() => {
// popup-menu item样式 // popup-menu item样式
.layui-nav.layui-nav-collapse { .layui-nav.layui-nav-collapse {
.layui-sub-menu-popup dl .layui-nav-item { .layui-sub-menu-popup dl .layui-nav-item {
width: auto; width: 100%;
> a { > a {
display: flex; display: flex;
align-items: center; align-items: center;

28
package/component/src/component/subMenu/index.vue
View File

@ -13,6 +13,7 @@ import {
Ref, Ref,
useSlots, useSlots,
watch, watch,
watchEffect,
} from "vue"; } from "vue";
import { onClickOutside } from "@vueuse/core"; import { onClickOutside } from "@vueuse/core";
import LayTransition from "../transition/index.vue"; import LayTransition from "../transition/index.vue";
@ -48,10 +49,19 @@ const nextLevel = computed(() => level.value + 1);
provideLevel(nextLevel); provideLevel(nextLevel);
const computedPopup = computed( const needPopup = ref(false);
() => watchEffect(() => {
isTree.value && (isCollapse.value === true || isCollapse.value === "true") const _isCollapse = isCollapse.value === true || isCollapse.value === "true";
); if (_isCollapse) {
// 折叠时等待动画结束改变DOM
setTimeout(() => {
needPopup.value = isTree.value && _isCollapse;
}, 200);
} else {
// 展开时立即改变DOM
needPopup.value = isTree.value && _isCollapse;
}
});
watch(isOpen, () => { watch(isOpen, () => {
if (isOpen.value && position.value !== "left-nav") { if (isOpen.value && position.value !== "left-nav") {
@ -100,8 +110,7 @@ onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
</script> </script>
<template> <template>
<template v-if="!computedPopup"> <li v-if="!needPopup" class="layui-nav-item">
<li class="layui-nav-item">
<a href="javascript:void(0)" @click="openHandle()"> <a href="javascript:void(0)" @click="openHandle()">
<!-- 图标 --> <!-- 图标 -->
<i v-if="slots.icon" class="layui-sub-menu-icon"> <i v-if="slots.icon" class="layui-sub-menu-icon">
@ -143,9 +152,7 @@ onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
</dl> </dl>
</template> </template>
</li> </li>
</template> <SubMenuPopup v-else :id="id">
<template v-else>
<SubMenuPopup :id="id">
<template v-if="slots.icon" #icon> <template v-if="slots.icon" #icon>
<slot name="icon"></slot> <slot name="icon"></slot>
</template> </template>
@ -153,11 +160,10 @@ onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
<slot name="title"></slot> <slot name="title"></slot>
</template> </template>
<template #expandIcon> <template #expandIcon>
<slot v-if="slots.expandIcon" name="expandIcon"></slot> <slot name="expandIcon"></slot>
</template> </template>
<template #default> <template #default>
<slot name="default"></slot> <slot name="default"></slot>
</template> </template>
</SubMenuPopup> </SubMenuPopup>
</template> </template>
</template>

8
package/document-component/src/document/zh-CN/components/menu.md
View File

@ -449,9 +449,11 @@ export default {
首页 首页
</template> </template>
</lay-menu-item> </lay-menu-item>
<lay-sub-menu title="目录" id="3"> <lay-sub-menu id="3">
<template #icon><lay-icon type="layui-icon-home"></lay-icon></template> <template #icon><lay-icon type="layui-icon-home"></lay-icon></template>
<template #title>首页</template> <template #title>
首页
</template>
<lay-menu-item id="4"> <lay-menu-item id="4">
<template #title>首页</template> <template #title>首页</template>
</lay-menu-item> </lay-menu-item>
@ -480,7 +482,7 @@ export default {
</lay-sub-menu> </lay-sub-menu>
</lay-sub-menu> </lay-sub-menu>
</lay-sub-menu> </lay-sub-menu>
<lay-sub-menu title="目录" id="13"> <lay-sub-menu id="13">
<template #icon> <template #icon>
<lay-icon type="layui-icon-home"></lay-icon> <lay-icon type="layui-icon-home"></lay-icon>
</template> </template>