Vue3 实现双盒子定位Overlay的示例

在 Vue 3 中，使用 原理要实现相对于某一元素的 Overlay 需要依靠两个元素，Origin 和 Panel，Origin 表示相对于的元素，而 Panel 表示 Overlay 本身，实现方法主要有两种。文本流定位法，基于 position 的 absolute 和 relative 特性，将 Panel 形成相对于 Origin 的位置来定位的方式。拿到这两者的 dom ref 后，需要通过实时计算 Origin 的盒子的大小和位置，来获得 Panel 的相对偏移。假设我们要把 Overlay 放在 Origin 的正下方，计算函数应该是这样的。Panel 只需要监听其大小的变化，大小变化有一个更加完美的API， ResizeObserver。然后，需要在dom销毁前取消监听。监听窗口事件为了能够正确的获取变化，我们需要监听两个事件：resize 和 scroll.至此，已经完成基本的双盒子定位法的 Overlay 的设计。