From b9815b625b08a2d6028645dd346d41eb922f6195 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Mon, 4 Jul 2022 15:09:13 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(component):=20[dropdown]=E6=8C=87?=
 =?UTF-8?q?=E5=AE=9A=E4=B8=8B=E6=8B=89=E9=9D=A2=E6=9D=BF=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E5=AE=B9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/component/dropdown/index.vue          | 20 ++++++++++---------
 .../src/component/subMenu/SubMenuPopup.vue    |  2 +-
 .../component/src/component/subMenu/index.vue |  5 ++---
 .../src/document/zh-CN/components/menu.md     |  4 ++--
 4 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/package/component/src/component/dropdown/index.vue b/package/component/src/component/dropdown/index.vue
index dbc86b15..f1d10113 100644
--- a/package/component/src/component/dropdown/index.vue
+++ b/package/component/src/component/dropdown/index.vue
@@ -6,7 +6,7 @@ export default {
 
 <script setup lang="ts">
 import "./index.less";
-import { CSSProperties, inject, reactive, Ref } from "vue";
+import { ComputedRef, CSSProperties, inject, reactive, Ref } from "vue";
 import {
   computed,
   nextTick,
@@ -52,7 +52,7 @@ export interface LayDropdownProps {
   mouseLeaveDelay?: number;
   focusDelay?: number;
   alignPoint?: boolean;
-  renderToBody?: boolean;
+  popupContainer?: string | HTMLElement | undefined;
 }
 
 const props = withDefaults(defineProps<LayDropdownProps>(), {
@@ -73,7 +73,6 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
   mouseLeaveDelay: 150,
   focusDelay: 150,
   alignPoint: false,
-  renderToBody: false,
 });
 
 const childrenRefs = new Set<Ref<HTMLElement>>();
@@ -85,6 +84,13 @@ const { width: windowWidth, height: windowHeight } = useWindowSize();
 const { x: mouseLeft, y: mouseTop } = useMouse();
 const openState = ref(false);
 
+const containerRef = computed(() =>
+  props.popupContainer 
+    // @ts-ignore
+    ? document.querySelector<HTMLElement>(props.popupContainer) ?? document.body
+    : dropdownRef.value
+) as ComputedRef<HTMLElement>;
+
 const triggerMethods = computed(() =>
   ([] as Array<DropdownTrigger>).concat(props.trigger)
 );
@@ -142,10 +148,6 @@ const changeVisible = (visible: boolean, delay?: number) => {
   }
 };
 
-const containerRef = computed(() =>
-  props.renderToBody ? document.body : dropdownRef.value
-);
-
 const getElementScrollRect = (element: HTMLElement, containerRect: DOMRect) => {
   const rect = element.getBoundingClientRect();
 
@@ -603,9 +605,9 @@ defineExpose({ open, hide, toggle });
     <div @click="handleClick()" @contextmenu="handleContextMenuClick">
       <slot></slot>
     </div>
-    <Teleport :to="containerRef" :disabled="!renderToBody">
+    <Teleport :to="popupContainer" :disabled="!popupContainer">
       <dl
-        v-show="openState"
+        v-if="openState"
         ref="contentRef"
         class="layui-dropdown-content layui-anim layui-anim-upbit"
         :style="contentStyle"
diff --git a/package/component/src/component/subMenu/SubMenuPopup.vue b/package/component/src/component/subMenu/SubMenuPopup.vue
index dd33edcb..62c83988 100644
--- a/package/component/src/component/subMenu/SubMenuPopup.vue
+++ b/package/component/src/component/subMenu/SubMenuPopup.vue
@@ -33,7 +33,7 @@ const isOpen = computed(() => {
     placement="right-top"
     :autoFitMinWidth="false"
     :contentOffset="3"
-    :renderToBody="true"
+    popupContainer="body"
     class="layui-sub-menu-popup"
   >
     <li :class="['layui-nav-item']">
diff --git a/package/component/src/component/subMenu/index.vue b/package/component/src/component/subMenu/index.vue
index f2c1e1d7..279bdae8 100644
--- a/package/component/src/component/subMenu/index.vue
+++ b/package/component/src/component/subMenu/index.vue
@@ -52,13 +52,12 @@ provideLevel(nextLevel);
 const needPopup = ref(false);
 watchEffect(() => {
   const _isCollapse = isCollapse.value === true || isCollapse.value === "true";
-  if (_isCollapse) {
-    // 折叠时等待动画结束改变DOM
+  if (_isCollapse && level.value === 1) {
+    // 动画结束后改变
     setTimeout(() => {
       needPopup.value = isTree.value && _isCollapse;
     }, 200);
   } else {
-    // 展开时立即改变DOM
     needPopup.value = isTree.value && _isCollapse;
   }
 });
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 e8c4b9e2..0811748a 100644
--- a/package/document-component/src/document/zh-CN/components/menu.md
+++ b/package/document-component/src/document/zh-CN/components/menu.md
@@ -431,8 +431,8 @@ export default {
 <template>
   <lay-switch v-model="collapse20"></lay-switch>&nbsp;&nbsp;
   <lay-switch v-model="active20">
-    <template #onswitch-icon>😄</template>
-    <template #unswitch-icon>🤔</template>
+    <template #onswitch-icon>★</template>
+    <template #unswitch-icon>☀</template>
   </lay-switch>
   <br/>
   <br/>