Teleport 组件是 Vue.js 3 中引入的特性之一，它允许将组件的内容传送（teleport）到当前组件之外的目标位置，这在处理复杂的布局、模态框等方案时非常有用。

A.vue

<template>
  <div class="dialog">
    <header class="header">
      <div>我是弹框</div>
      <el-icon>
        <CloseBold></CloseBold>
      </el-icon>
    </header>
    <main class="main">
      我是内容
    </main>
    <footer class="footer">
      <el-button size="small">取消</el-button>
      <el-button size="small" type="priamary">确定</el-button>
    </footer>
  </div>
</template>

<script setup lang="ts">

</script>

<style lang="less" scoped>
.dialog {
  width: 400px;
  height: 400px;
  background-color: #282c34;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -200px;
}

.header {
  display: flex;
  color: aliceblue;
  border-bottom: 1px solid #636466;
  padding: 10px;
  justify-content: space-between;
}

.main {
  flex: 1;
  color: #fff;
  padding: 10px;
}

.footer {
  border-top: 1px solid gainsboro;
  padding: 10px;
  display: flex;
  justify-content: flex-end;

}</style>

App.vue

<template>
  <div class="parent">
    <h1>我是父级</h1>
    <A></A>
  </div>
</template>

<script setup lang="ts">
import { ref,reactive } from 'vue';
import A from './components/A.vue';

</script>

<style scoped>
* {
  padding: 0;
  margin: 0;

}
.parent {
  background: yellow;
  height: 50vh;
  position: relative;
}

</style>

加入 Teleport 传送组件后，不再受父级影响

App.vue

<template>
  <div class="parent">
    <h1>我是父级</h1>
    <Teleport :disabled="false" to="body">
      <!-- disabled 控制 teleport 是否禁用，to 控制 teleport 的目标 -->
      <A></A>
    </Teleport>
    
  </div>
</template>

<script setup lang="ts">
import { ref,reactive } from 'vue';
import A from './components/A.vue';

</script>

<style scoped>
* {
  padding: 0;
  margin: 0;

}
.parent {
  background: yellow;
  height: 50vh;
  position: relative;
}

</style>