Vue3.0 teleport

一、Teleport

teleport解决了一个包含全屏模式的组件，逻辑存在于组件中，该组件的快速定位可以通过css来解决。teleport提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下渲染了 HTML，而不必求助于全局状态或将其拆分为两个组件。以下是我们修改 modal-button 以使用 <teleport>，并告诉 Vue “Teleport 这个 HTML 到该‘body’标签”。

页面效果如下：

以下是modal-button的组件代码

<template>
  <button @click="modalOpen = true">Open full screen modal! (With teleport!)</button>
  <teleport to="body">
    <div v-if="modalOpen" class="modal">
      <div class="content">
        <el-row>
          <el-col :span="24" class="text">演示teleport的用法： I'm a teleported modal! (My parent is "body")</el-col>
          <el-col :span="24">
            <el-button type="warning" @click="modalOpen = false">Close</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </teleport>
</template>
<script>
  export default {
    data: function () {
      return {
        modalOpen: false,
      }
    },
  }
</script>
<style scoped>
  .modal {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .content {
    width: 40%;
    background: #fff;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .text {
    margin-bottom: 20px;
  }
</style>

以上是teleport使用场景的演示，希望对您有帮助！