Vue3如何实现双盒子定位的Overlay效果？

本文共计1295个文字，预计阅读时间需要6分钟。

在Vue 3中，利用Teleport可以将组件渲染到根节点之外，同时保持其响应式和生命周期函数的正常调用。具体来说，通过Teleport可以将某个元素渲染到页面中的指定位置，而不会影响该元素的响应式数据和生命周期。

在 Vue 3 中，使用 <Teleport> 可以很优雅的把某个组件渲染到根节点之外的节点，同时使其渲染的内容不丧失响应式和对应的生命周期函数调用。那么基于此，用 <Teleport> 实现相对于某一元素的 Overlay 。 实际上，这篇文章跟 Vue3 的关系不大，只是通过 Vue3 讲解一类 Overlay 的设计方法。

原理

要实现相对于某一元素的 Overlay 需要依靠两个元素，Origin 和 Panel，Origin 表示相对于的元素，而 Panel 表示 Overlay 本身，实现方法主要有两种。

文本流定位法，基于 position 的 absolute 和 relative 特性，将 Panel 形成相对于 Origin 的位置来定位的方式。
Overlay 基于 Origin 做固定偏移的双盒子定位法，也就是本文需要讲解的方法。
实现 首先，通过<Teleport>，能够建立顶层 Overlay，也就是在根节点创建一个新的节点。