From 7087e7f0057a5b31c4baaa8af832d4116d7d2d78 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Thu, 25 Aug 2022 00:43:35 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(component):=20[dropdown]=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=20popupContainer=20=E4=B8=8D=E9=80=82=E7=94=A8?=
 =?UTF-8?q?=E4=BA=8E=20vue=20=E8=87=AA=E8=BA=AB=E6=B8=B2=E6=9F=93=E7=9A=84?=
 =?UTF-8?q?=E5=85=83=E7=B4=A0=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/dropdown/TeleportWrapper.vue    | 33 +++++++++++++++++++
 .../src/component/dropdown/index.vue          | 12 +++----
 .../src/document/zh-CN/components/dropdown.md | 11 +++++++
 3 files changed, 50 insertions(+), 6 deletions(-)
 create mode 100644 package/component/src/component/dropdown/TeleportWrapper.vue

diff --git a/package/component/src/component/dropdown/TeleportWrapper.vue b/package/component/src/component/dropdown/TeleportWrapper.vue
new file mode 100644
index 00000000..6e412431
--- /dev/null
+++ b/package/component/src/component/dropdown/TeleportWrapper.vue
@@ -0,0 +1,33 @@
+<script lang="ts">
+export default {
+  name: "TeleportWrapper",
+};
+</script>
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+
+export interface TeleportWrapperProps {
+  to?: string;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<TeleportWrapperProps>(), {
+  to: '',
+  disabled: false,
+})
+
+const target = ref<Element | null>(null)
+
+onMounted(() => {
+  if (!props.to) return;
+  const el = document.querySelector(props.to)
+  if (el) {
+    target.value = el
+  }
+})
+</script>
+<template>
+  <Teleport :to="target" :disabled="!target || disabled">
+    <slot></slot>
+  </Teleport>
+</template>
\ No newline at end of file
diff --git a/package/component/src/component/dropdown/index.vue b/package/component/src/component/dropdown/index.vue
index 7fe8217f..d86129fd 100644
--- a/package/component/src/component/dropdown/index.vue
+++ b/package/component/src/component/dropdown/index.vue
@@ -30,6 +30,7 @@ import {
   ElementScrollRect,
   DropdownContext,
 } from "./interface";
+import TeleportWrapper  from './TeleportWrapper.vue';
 
 export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
 
@@ -52,7 +53,7 @@ export interface LayDropdownProps {
   mouseLeaveDelay?: number;
   focusDelay?: number;
   alignPoint?: boolean;
-  popupContainer?: string | HTMLElement | undefined;
+  popupContainer?: string | undefined;
 }
 
 const props = withDefaults(defineProps<LayDropdownProps>(), {
@@ -77,7 +78,7 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
 });
 
 const childrenRefs = new Set<Ref<HTMLElement>>();
-const dropdownCtx = inject<DropdownContext>(dropdownInjectionKey, undefined);
+const dropdownCtx = inject<DropdownContext | undefined>(dropdownInjectionKey, undefined);
 const dropdownRef = shallowRef<HTMLElement | undefined>();
 const contentRef = shallowRef<HTMLElement | undefined>();
 const contentStyle = ref<CSSProperties>({});
@@ -87,8 +88,7 @@ const openState = ref(false);
 
 const containerRef = computed(() =>
   props.popupContainer
-    ? // @ts-ignore
-      document.querySelector<HTMLElement>(props.popupContainer) ?? document.body
+    ? document.querySelector<HTMLElement>(props.popupContainer) ?? document.body
     : dropdownRef.value
 ) as ComputedRef<HTMLElement>;
 
@@ -612,7 +612,7 @@ defineExpose({ open, hide, toggle });
     <div @click="handleClick()" @contextmenu="handleContextMenuClick">
       <slot></slot>
     </div>
-    <Teleport :to="popupContainer" :disabled="!popupContainer">
+    <TeleportWrapper :to="popupContainer">
       <dl
         v-if="openState"
         ref="contentRef"
@@ -623,6 +623,6 @@ defineExpose({ open, hide, toggle });
       >
         <slot name="content"></slot>
       </dl>
-    </Teleport>
+    </TeleportWrapper>
   </div>
 </template>
diff --git a/package/document-component/src/document/zh-CN/components/dropdown.md b/package/document-component/src/document/zh-CN/components/dropdown.md
index c3a35089..9fc962a9 100644
--- a/package/document-component/src/document/zh-CN/components/dropdown.md
+++ b/package/document-component/src/document/zh-CN/components/dropdown.md
@@ -23,6 +23,17 @@
         </lay-dropdown-menu>
     </template>
   </lay-dropdown>
+   &nbsp;&nbsp;
+  <lay-dropdown popupContainer=".layui-body">
+    <lay-button type="primary">下拉菜单</lay-button>
+    <template #content>
+        <lay-dropdown-menu>
+          <lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
+          <lay-dropdown-menu-item>选项二</lay-dropdown-menu-item>
+          <lay-dropdown-menu-item>选项三</lay-dropdown-menu-item>
+        </lay-dropdown-menu>
+    </template>
+  </lay-dropdown>
 </template>
 
 <script>