From b826124c9287bf42e09b73da5bce67ef5a262159 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Sat, 10 Sep 2022 21:55:56 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(component):=20[teleportWrapp?=
 =?UTF-8?q?er]=E4=BD=BF=E7=94=A8=20mutation=20observer,=E7=A1=AE=E4=BF=9D?=
 =?UTF-8?q?=E5=8D=B3=E4=BD=BF=E5=9C=A8=E6=B8=B2=E6=9F=93=E7=9B=AE=E6=A0=87?=
 =?UTF-8?q?=E5=85=83=E7=B4=A0=E5=89=8D=E6=8C=82=E8=BD=BD=E4=BA=86=20telepo?=
 =?UTF-8?q?rtWrapper,=20=E4=BB=96=E4=B9=9F=E8=83=BD=E6=AD=A3=E5=B8=B8?=
 =?UTF-8?q?=E5=B7=A5=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/_components/teleportWrapper.vue | 19 +++++++++++++------
 package/component/src/utils/withInstall.ts    |  6 +++---
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/package/component/src/component/_components/teleportWrapper.vue b/package/component/src/component/_components/teleportWrapper.vue
index fbfcd3f1..cce2c1bb 100644
--- a/package/component/src/component/_components/teleportWrapper.vue
+++ b/package/component/src/component/_components/teleportWrapper.vue
@@ -19,15 +19,22 @@ const props = withDefaults(defineProps<TeleportWrapperProps>(), {
 const target = ref<Element | null>(null);
 
 onMounted(() => {
-  if (!props.to) return;
-  const el = document.querySelector(props.to);
-  if (el) {
-    target.value = el;
-  }
+  const observer = new MutationObserver((mutationList, observer) => {
+    for (const mutation of mutationList) {
+      if (mutation.type !== "childList") continue;
+      const el = document.querySelector(props.to);
+      if (!el) continue;
+      target.value = el;
+      observer.disconnect();
+      break;
+    }
+  });
+  observer.observe(document, { childList: true, subtree: true });
+  return () => observer.disconnect();
 });
 </script>
 <template>
-  <Teleport :to="target" :disabled="!target || disabled">
+  <Teleport :to="target" v-if="target" :disabled="!target || disabled">
     <slot></slot>
   </Teleport>
 </template>
diff --git a/package/component/src/utils/withInstall.ts b/package/component/src/utils/withInstall.ts
index 8c6ba981..5bc83d00 100644
--- a/package/component/src/utils/withInstall.ts
+++ b/package/component/src/utils/withInstall.ts
@@ -1,12 +1,12 @@
-import { App, Plugin } from "vue";
+import { App, Component, Plugin } from "vue";
 
 export type WithInstallType<T> = T & Plugin;
 
 export const withInstall = <T>(comp: T): T & Plugin => {
-  const component = comp as any;
+  const component = comp as T & Component & Plugin;
 
   component.install = (app: App) => {
-    app.component(component.name, comp);
+    app.component(component.name!, comp as T & Component & Plugin);
   };
 
   return component as T & Plugin;