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