Vue3 -- 新组件【谁学谁真香系列6】

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