Vue3.0 teleport 前端vue.js

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

文章图片

【Vue3.0 teleport】以下是modal-button的组件代码

.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; }

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