Vue 3.0 中 Teleport使用示例详解

<teleport to="目标选择器">
  <!-- 要传送的内容 -->
</teleport>

<template>
  <div>
    <button @click="showModal = true">打开模态框</button>
    <teleport to="body">
      <div v-if="showModal" class="modal">
        <div class="modal-content">
          这是一个模态框
          <button @click="showModal = false">关闭</button>
        </div>
      </div>
    </teleport>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const showModal = ref(false);
</script>
<style>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
}
</style>

<template>
  <div>
    <div id="teleport-target"></div>
    <teleport to="#teleport-target">
      <p>这段内容会被传送到上面的div中</p>
    </teleport>
  </div>
</template>
<script setup>
// 不需要响应式数据时，setup 语法糖可以完全省略 script 内容
</script>

<template>
  <div>
    <teleport to="#modal-container">
      <MyModalComponent v-if="showModal" @close="showModal = false" />
    </teleport>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import MyModalComponent from './MyModalComponent.vue';
const showModal = ref(false);
</script>

<template>
  <div>
    <teleport to="#modal-container" :disabled="shouldDisable">
      <!-- 内容 -->
    </teleport>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const shouldDisable = ref(false);
</script>

<template>
  <div>
    <teleport to="#target">
      <div>A</div>
    </teleport>
    <teleport to="#target">
      <div>B</div>
    </teleport>
    <!-- 结果会是 A 在 B 前面 -->
  </div>
</template>
<script setup>
// 不需要额外的逻辑
</script>