From f00064d509349a25032df02adc79bceed0d88733 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Sat, 2 Jul 2022 01:02:24 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(component):=20[menu]=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E6=8A=98=E5=8F=A0=E6=97=B6=E5=81=B6=E7=8E=B0=E9=97=AA?=
 =?UTF-8?q?=E7=83=81=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/component/subMenu/SubMenuPopup.vue    |   6 +-
 .../component/src/component/subMenu/index.vue | 132 +++++++++---------
 .../src/document/zh-CN/components/menu.md     |   8 +-
 3 files changed, 77 insertions(+), 69 deletions(-)

diff --git a/package/component/src/component/subMenu/SubMenuPopup.vue b/package/component/src/component/subMenu/SubMenuPopup.vue
index 71bb4cac..8cd0be79 100644
--- a/package/component/src/component/subMenu/SubMenuPopup.vue
+++ b/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;
diff --git a/package/component/src/component/subMenu/index.vue b/package/component/src/component/subMenu/index.vue
index 9a67649d..6c021797 100644
--- a/package/component/src/component/subMenu/index.vue
+++ b/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,64 +110,60 @@ onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
 </script>
 
 <template>
-  <template v-if="!computedPopup">
-    <li class="layui-nav-item">
-      <a href="javascript:void(0)" @click="openHandle()">
-        <!-- 图标 -->
-        <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>
+  <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">
         <slot name="icon"></slot>
-      </template>
-      <template v-if="slots.title" #title>
-        <slot name="title"></slot>
-      </template>
-      <template #expandIcon>
-        <slot v-if="slots.expandIcon" name="expandIcon"></slot>
-      </template>
-      <template #default>
-        <slot name="default"></slot>
-      </template>
-    </SubMenuPopup>
-  </template>
+      </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>
+  <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>
diff --git a/package/document-component/src/document/zh-CN/components/menu.md b/package/document-component/src/document/zh-CN/components/menu.md
index 4a92bd0e..534a1253 100644
--- a/package/document-component/src/document/zh-CN/components/menu.md
+++ b/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>