Teleport
Teleport是什么?–Teleport是一种能够将我们的组件html结构移动到指定位置的技术。
父组件:
<template><div calss="outer"><h2>我是App组件</h2><img src="https://z1.ax1x.com/2023/11/19/piNxLo4.jpg" alt=""><br><Modal /></div>
</template><script lang="ts" setup name="App">
import { ref } from "vue"
import Modal from "./Modal.vue";</script><style lang="less">
.outer {background-color: #ddd;border-radius: 10px;padding: 10px;width: 400px;height: 400px;// 滤镜 saturate--饱和度filter:saturate(200%)
}img {width: 270px;
}button {margin: 3px 5px;
}
</style>
注意看父组件中.outer的 filter:saturate(200%)
,这个样式会让子组件中的fixed定位基于自己的父组件,而不是按照我们的预期根据整个视口定位。
这时候我们就需要在子组件中使用Teleport
了,将我们需要按照整个视口定位的内容用<teleport to=""> </teleport>
包裹起来就可以实现预期。
<!-- 这里的to里面可以写选择器字符串,例如'#app'、'.demo'、'body' --><teleport to="body"><div class="modal" v-show="isShow"><h2>我是弹窗的标题</h2><p>我是弹窗的内容</p><button @click="isShow = false">关闭弹窗</button></div></teleport>
整个子组件代码:
<template><button @click="isShow = true">展示弹窗</button><!-- 这里的to里面可以写选择器字符串,例如'#app'、'.demo'、'body' --><teleport to="body"><div class="modal" v-show