🐛(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(
+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, () => {
   if (isOpen.value && position.value !== "left-nav") {
@@ -100,64 +110,60 @@ onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
 </script>
 
 <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">
-          <slot name="icon"></slot>
-        </i>
-        <!-- 标题 -->
-        <span>
-          <slot v-if="slots.title" name="title"></slot>
-        </span>
-        <!-- 扩展 -->
-        <i v-if="slots.expandIcon" class="layui-nav-more">
-          <slot name="expandIcon" :isExpand="isOpen"></slot>
-        </i>
-        <i
-          v-else
-          :class="[
-            isOpen ? 'layui-nav-mored' : '',
-            'layui-icon layui-icon-down',
-            'layui-nav-more',
-          ]"
-        ></i>
-      </a>
-      <template v-if="isTree">
-        <lay-transition :enable="isCollapseTransition">
-          <div v-if="isOpen">
-            <dl class="layui-nav-child">
-              <slot></slot>
-            </dl>
-          </div>
-        </lay-transition>
-      </template>
-      <template v-else>
-        <dl
-          ref="subMenuRef"
-          class="layui-nav-child layui-anim layui-anim-upbit"
-          :class="[{ 'layui-show': isOpen }, position]"
-        >
-          <slot></slot>
-        </dl>
-      </template>
-    </li>
-  </template>
-  <template v-else>
-    <SubMenuPopup :id="id">
-      <template v-if="slots.icon" #icon>
         <slot name="icon"></slot>
-      </template>
+      </i>
-      <template v-if="slots.title" #title>
+      <!-- 标题 -->
-        <slot name="title"></slot>
+      <span>
-      </template>
+        <slot v-if="slots.title" name="title"></slot>
-      <template #expandIcon>
+      </span>
-        <slot v-if="slots.expandIcon" name="expandIcon"></slot>
+      <!-- 扩展 -->
-      </template>
+      <i v-if="slots.expandIcon" class="layui-nav-more">
-      <template #default>
+        <slot name="expandIcon" :isExpand="isOpen"></slot>
-        <slot name="default"></slot>
+      </i>
-      </template>
+      <i
-    </SubMenuPopup>
+        v-else
-  </template>
+        :class="[
+          isOpen ? 'layui-nav-mored' : '',
+          'layui-icon layui-icon-down',
+          'layui-nav-more',
+        ]"
+      ></i>
+    </a>
+    <template v-if="isTree">
+      <lay-transition :enable="isCollapseTransition">
+        <div v-if="isOpen">
+          <dl class="layui-nav-child">
+            <slot></slot>
+          </dl>
+        </div>
+      </lay-transition>
+    </template>
+    <template v-else>
+      <dl
+        ref="subMenuRef"
+        class="layui-nav-child layui-anim layui-anim-upbit"
+        :class="[{ 'layui-show': isOpen }, position]"
+      >
+        <slot></slot>
+      </dl>
+    </template>
+  </li>
+  <SubMenuPopup v-else :id="id">
+    <template v-if="slots.icon" #icon>
+      <slot name="icon"></slot>
+    </template>
+    <template v-if="slots.title" #title>
+      <slot name="title"></slot>
+    </template>
+    <template #expandIcon>
+      <slot name="expandIcon"></slot>
+    </template>
+    <template #default>
+      <slot name="default"></slot>
+    </template>
+  </SubMenuPopup>
 </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>