传送门

Teleport传送门，可以把内部标签，通过to属性传到任意标签里面的底部

注意：to属性内写的是css选择器

1<!-- 原html结构 -->
2<div id="app">
3  <div class="father">
4    <div class="son"></div>
5  </div>
6</div>
7<!-- 通过Teleport传送之后的html结构 -->
8<div id="app">
9  <div class="father"></div>
10  <div class="son"></div>
11</div>

代码案例：

1<template>
2  <div class="father">
3    <Teleport to="#app">
4      <div class="son"></div>
5    </Teleport>
6  </div>
7</template>
8
9<script lang="ts" setup></script>
10
11<style scoped>
12.father {
13  width: 500px;
14  height: 500px;
15  background-color: orange;
16  position: relative;
17}
18.son {
19  width: 100%;
20  height: 300px;
21  background-color: rgba(0, 0, 0, 0.3);
22  position: absolute;
23  top: 0;
24  left: 0;
25}
26</style>

传送门#

传送门