[JavaScript知识库]VUE3-利用teleport标签传送并制作模态框（20）

本案例用到VUE3的一个标签叫<teleport></teleport>，此标签的to属性表示传送的目的地，值为html元素，作用是将此标签内部嵌套的其他元素传送到目的地。为什么要用这个玩意？举一个栗子：小王写了一个组件，是一个模态框的组件，非常好用，此时在我这边的项目中组件间是嵌套了非常多的层级的，导致当我使用小王的组件时，展开模态框，从而把我的其他内容全部撑开，破坏了页面样式，导致问题的产生，这时候如果小王是用的<teleport></teleport>标签嵌套的模态框（标签内容是传送到body标签的最后的），当我们使用他的组件时，就不用担心展开模态框会破坏页面结构，因为他的模态框是body标签的内容，样式是相对于body标签进行定位的，所以他的模态框完全影响不到我们现有的页面样式，十分好用！

此时我现有项目

父组件App.vue

<template>
  <div class="app">
    <h1>这是祖先组件</h1>
    <ChildComponent></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from "@/components/ChildComponent";

export default {
  name: 'App',
  components: {ChildComponent}
}
</script>

<style>
.app {
  background-color: gray;
  padding: 10px;
}
</style>

子组件ChildComponent.vue

<template>
  <div class="child">
    <h1>这是孩子组件</h1>
    <GrandsonAssembly></GrandsonAssembly>
  </div>
</template>

<script>
import GrandsonAssembly from "@/components/GrandsonAssembly";

export default {
  name: "ChildComponent",
  components: {GrandsonAssembly}
}
</script>

<style scoped>
.child {
  background-color: skyblue;
  padding: 10px;
}
</style>

孙组件GrandsonAssembly.vue（用到了小王的模态框）

<template>
  <div class="son">
    <h1>这是孙子组件</h1>
    <ModalBox></ModalBox>
  </div>
</template>

<script>
import ModalBox from "@/components/ModalBox";

export default {
  name: "GrandsonAssembly",
  components: {ModalBox}
}
</script>

<style scoped>
.son {
  background-color: orange;
  padding: 10px;
}
</style>

小王的模态框组件ModalBox.vue

<template>
  <div>
    <button type="button" @click="isShow = true">弹出模态框</button>

    <teleport to="body"><!-- 将元素传送到body标签的最后面 -->
      <section v-if="isShow" class="mask"><!-- 语义化标签，表示一个独立的区块，这里用来做遮罩效果 -->
        <div class="modalBox"><!-- 模态框 -->
          <h3>这是一些内容</h3>
          <h3>这是一些内容</h3>
          <h3>这是一些内容</h3>
          <h3>这是一些内容</h3>
          <h3>这是一些内容</h3>
          <button type="button" @click="isShow = false">关闭模态框</button>
        </div>
      </section>
    </teleport>

  </div>
</template>

<script>
import {ref} from "vue";

export default {
  name: "ModalBox",
  setup() {
    let isShow = ref(false)
    return {isShow}
  }
}
</script>

<style scoped>
.mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.modalBox {
  width: 300px;
  height: 300px;
  background-color: lightgreen;
  text-align: center;

  /* 相对于父元素来达到水平和垂直的居中 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>

结果演示