vue3 - 内置组件Teleport的使用

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

1，使用场景：

一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方；

也就是说我有一个全屏的弹出框（模态框）或 Toast 轻提示 组件，可能会在多个组件中使用到，但是由于节点嵌套的太深，我想把它的dom元素放在最外层的容器上面；通过组件传参控制它的显示于隐藏；

这样做的好处是：处理嵌套组件的定位、z-index 和样式就会变得简单；不会造成样式污染；

而且管理起来反而会方便容易很多；

2，搭配组件使用

<Teleport> 只改变了渲染的 DOM 结构，它不会影响组件间的逻辑关系。也就是说，如果 <Teleport> 包含了一个组件，那么该组件始终和这个使用了 <teleport> 的组件保持逻辑上的父子关系。传入的 props 和触发的事件也会照常工作。

这也意味着来自父组件的注入也会按预期工作，子组件将在 Vue Devtools 中嵌套在父级组件下面，而不是放在实际内容移动到的地方。

效果图如下：

点击按钮弹出模态框，点击OK关闭模态框，且渲染的节点位置是在 body（或任意节点）下面的；

实现如下

父组件：

<script setup>
import { reactive, ref, watch, onMounted } from "vue";
// 引入模态框组件
import Modal from "../../components/component/Modal.vue";
let isShow = ref(false);

// 显示模态框
const showModel = () => {
  isShow.value = true;
};
</script>

<template>
 <div class="container">
    <!-- 预留Teleport组件的位置 可以放到这里 to=".container" -->
  </div>
  <div id="container">
    <!-- 预留Teleport组件的位置 可以放到这里 to="#container -->
  </div>
  
  <div class="teleport">
    <h4>teleport组件演示</h4>
    <button @click="showModel">点击弹出模态框</button>
    
   <!-------------------------------------Teleport使用 ------------------------------------>
    <Teleport to="body">
      <!-- 使用这个 modal 组件，传入 prop -->
      <modal :show="isShow" @close="isShow = false">
        <template #header>
          <h3>custom header</h3>
        </template>
      </modal>
    </Teleport>
    
  </div>
</template>

<style scoped></style>

子组件Modal.vue：

<script setup>
const props = defineProps({
  show: Boolean,
});
</script>

<template>
  <Transition name="modal">
    <div v-if="show" class="modal-mask">
      <div class="modal-container">
        <div class="modal-header">
          <slot name="header">default header</slot>
        </div>

        <div class="modal-body">
          <slot name="body">default body</slot>
        </div>

        <div class="modal-footer">
          <slot name="footer">
            default footer
            <button class="modal-default-button" @click="$emit('close')">
              OK
            </button>
          </slot>
        </div>
      </div>
    </div>
  </Transition>
</template>

<style>
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  transition: opacity 0.3s ease;
}

.modal-container {
  width: 300px;
  margin: auto;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition: all 0.3s ease;
}

.modal-header h3 {
  margin-top: 0;
  color: #42b983;
}

.modal-body {
  margin: 20px 0;
}

.modal-default-button {
  float: right;
}

/*
 * 对于 transition="modal" 的元素来说
 * 当通过 Vue.js 切换它们的可见性时
 * 以下样式会被自动应用。
 *
 * 你可以简单地通过编辑这些样式
 * 来体验该模态框的过渡效果。
 */

.modal-enter-from {
  opacity: 0;
}

.modal-leave-to {
  opacity: 0;
}

.modal-enter-from .modal-container,
.modal-leave-to .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
</style>

3，to属性的使用

<Teleport> 接收一个 to prop 来指定传送的目标。to 的值可以是一个 CSS 选择器字符串（如：to=".container"、to="#container），也可以是一个 DOM 元素对象(如：to="body")。

这段代码的作用就是告诉 Vue把以下模板片段传送到 你所期望的标签下面。

4，禁用 Teleport

在某些场景下可能需要视情况禁用 <Teleport>，需要添加disabled为false即可；

   <Teleport to="body" :disabled="false">
      <!-- 使用这个 modal 组件，传入 prop -->
      <modal :show="isShow" @close="isShow = false">
        <template #header>
          <h3>custom header</h3>
        </template>
      </modal>
    </Teleport>

那么此时这个组件就相当于普通的弹窗组件，不再进行移动了；

5，多个 Teleport 共享目标

一个可重用的模态框组件可能同时存在多个实例。对于此类场景，多个 <Teleport> 组件可以将其内容挂载在同一个目标元素上，而顺序就是简单的顺次追加，后挂载的将排在目标元素下更后面的位置上。

比如下面这样的用例：

<Teleport to="#modals">
  <div>A</div>
</Teleport>
<Teleport to="#modals">
  <div>B</div>
</Teleport>

渲染的结果为：

html
<div id="modals">
  <div>A</div>
  <div>B</div>
</div>