Vue 3 的 <teleport> 组件封装为自定义指令

<Teleport> 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

https://cn.vuejs.org/guide/built-ins/teleport.html

为了更加简便灵活，可以将 Vue 3 的 <teleport> 组件类似的功能封装为自定义指令。当然，但在某些情况下，直接使用 <teleport> 组件会更合适。

自定义指令的实现步骤

https://cn.vuejs.org/guide/reusability/custom-directives.html

1. 创建自定义指令：
   定义一个自定义指令 v-teleport，并在其 mounted 和 unmounted 钩子中进行 DOM 操作。

2. 挂载目标元素：
   在 mounted 钩子中，将元素移动到指定的目标容器中。

3. 卸载目标元素：
   在 unmounted 钩子中，将元素从目标容器中移除。

实现代码

首先，创建一个自定义指令 v-teleport。

// teleportDirective.js
export default {
  mounted(el, binding) {
    const targetSelector = binding.value || 'body';
    const targetElement = document.querySelector(targetSelector);
    if (targetElement) {
      targetElement.appendChild(el);
    } else {
      console.warn(`Target element "${targetSelector}" not found`);
    }
  },
  unmounted(el, binding) {
    const targetSelector = binding.value || 'body';
    const targetElement = document.querySelector(targetSelector);
    if (targetElement && targetElement.contains(el)) {
      targetElement.removeChild(el);
    }
  }
};

然后，在Vue 组件或主应用实例中注册这个自定义指令。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import teleportDirective from './teleportDirective';

const app = createApp(App);

app.directive('teleport', teleportDirective);

app.mount('#app');

最后，在组件中使用这个自定义指令。

<template>
  <div v-teleport="'#target-container'">
    This content will be teleported
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
};
</script>

<!-- 目标容器 -->
<div id="target-container"></div>

解释

1. 指令绑定值：

   • binding.value 是指令的绑定值。在这个例子中，我们使用了一个选择器字符串（如 '#target-container'）来指定目标元素。

2. 挂载时的操作：

   • 在 mounted 钩子中，我们通过 document.querySelector 找到目标元素，并将指令绑定的元素（el）追加到目标元素中。

3. 卸载时的操作：

   • 在 unmounted 钩子中，我们确保在目标元素中删除这个元素，以防内存泄漏。

通过这种方式，可以将元素移动到指定的 DOM 位置，类似于 <teleport> 组件的功能。这种自定义指令的方法提供了更多的灵活性，但在大多数情况下，使用 Vue 内置的 <teleport> 组件会更简单和可靠。

这样简洁很多了，不需要再套一层