theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

♻️(component): [teleportWrapper]使用 mutation observer,确保即使在渲染目标元素前挂载了 teleportWrapper, 他也能正常工作

Browse Source
This commit is contained in:
sight 2022-09-10 21:55:56 +08:00
parent 77ff852aaa
commit b826124c92
2 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
package/component/src/component/_components/teleportWrapper.vue
View File

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

6
package/component/src/utils/withInstall.ts
View File

@ -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;