✨(component): [dropdown]指定下拉面板渲染容器

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"

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']">

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;
   }
 });

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/>