Vue3 teleport 瞬间移动
作者:互联网
Teleport
是一种能够将我们的模板移动到 DOM
中 Vue app
之外的其他位置的技术,就有点像哆啦A梦的“任意门”
场景:像 modals
,toast
等这样的元素,很多情况下,我们将它完全的和我们的 Vue
应用的 DOM
完全剥离,管理起来反而会方便容易很多
原因在于如果我们嵌套在 Vue
的某个组件内部,那么处理嵌套组件的定位、z-index
和样式就会变得很困难
另外,像 modals
,toast
等这样的元素需要使用到 Vue
组件的状态(data
或者 props
)的值
这就是 Teleport
派上用场的地方。我们可以在组件的逻辑位置写模板代码,这意味着我们可以使用组件的 data
或 props
。然后在 Vue
应用的范围之外渲染它
一个 portal 的典型用例是当父组件有 overflow: hidden 或 z-index 样式时,但你需要子组件能够在视觉上“跳出”其容器。例如,对话框、悬浮卡以及提示框。常见的情况是创建一个包含全屏模式的组件。
对话框 position: absolute 的定位相对于父 div 作为参考。Teleport 提供了一种简单的方法,使我们可以控制要在DOM中哪个父对象下呈现HTML。
https://www.jianshu.com/p/e27b3308fc0a
<teleport to="#modals">
<div>A</div>
</teleport>
<teleport to="#modals">
<div>B</div>
</teleport>
<!-- result-->
<div id="modals">
<div>A</div>
<div>B</div>
</div>
多个 <teleport>
组件可以将其内容添加到同一目标元素。
标签:toast,teleport,Vue,Teleport,DOM,对话框,瞬间,Vue3,组件 来源: https://blog.csdn.net/a772116804/article/details/119898965