关于前端:Vue30-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 应用场景的演示，心愿对您有帮忙！