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

package/component/src/component/subMenu/SubMenuPopup.vue

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

package/component/src/component/subMenu/index.vue

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

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

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