teleport: 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

一、teleport应用场景

一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方，最常见的例子就是全屏的模态框。

二、模态框弹窗组件

新建ModalButton.vue组件

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div>
    <button @click="modalOpen = true">弹出窗口</button>
    <teleport to='body'>
      <div v-if="modalOpen" class="modal">
        <div>我是弹窗
          父元素为body
          <button @click="modalOpen=false">关闭窗口</button>
        </div>
      </div>
    </teleport>
  </div>
</template>
1
2
3
4
5
6
7
8
export default {
  // vue3兼容data写法
  data() {
    return {
      modalOpen:true
    }
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.modal{
  position: absolute;
  top: 0;
  left:0;
  right:0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.modal div{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  width: 300px;
  height: 300px;
  padding: 5px;
}

三、ModalButton组件的应用

1
<ModalButton></ModalButton>
1
2
3
4
5
// 加上文件类型后缀，不然会出现404 NOT FOUND
import ModalButton from "./ModalButton.vue";
components:{
    ModalButton
},

当弹窗显示的时候，审查元素.modal与#app位于body下的同一层级