智能科技网站模板,建局域网网站,浦江县城乡建设局网站,英语翻译网站开发之前说过#xff0c;使用 可以很优雅的把某个组件渲染到根节点之外的节点#xff0c;同时使其渲染的内容不丧失响应式和对应的生命周期函数调用。那么基于此#xff0c;用 实现相对于某一元素的 Overlay 。实际上#xff0c;这篇文章跟 Vue3 的关系不大#xff0c;只是通… 之前说过使用 可以很优雅的把某个组件渲染到根节点之外的节点同时使其渲染的内容不丧失响应式和对应的生命周期函数调用。那么基于此用 实现相对于某一元素的 Overlay 。实际上这篇文章跟 Vue3 的关系不大只是通过 Vue3 讲解一类 Overlay 的设计方法。原理要实现相对于某一元素的 Overlay 需要依靠两个元素Origin 和 PanelOrigin 表示相对于的元素而 Panel 表示 Overlay 本身实现方法主要有两种。1.基于 position 的absolute 和 relative 特性将 Origin 和 Panel 形成相互依赖的关系。2.Overlay 基于 Origin 做固定偏移的双盒子定位法也就是本文需要讲解的方法。实现首先通过能够建立顶层 Overlay也就是在根节点创建一个新的节点。setup(_, ctx) { const originRef ref(); const panelRef ref(); const panelStyle ref({ position: absolute }); // ... return () ( ref{originRef}origin #cdk-overlay-anchor fixed, top: 0, left: 0, right: 0, bottom: 0, height: 100vh, width: 100vw pointerEvents: none}} ref{panelRef} style{panelStyle.value} 100px, width: 100px border: 1px solid black}} / );}拿到这两者的 dom ref 后需要通过实时计算 Origin 的盒子的大小和位置来获得 Panel 的相对偏移。在 Vue 中元素只有在 mounted 后才能获取得到所以可以通过 composition-api 的 onMouted 来获取具体元素。然后再在 生命周期中 进行计算。计算两个盒子的相对位置如何计算 Origin 的大小和位置以及获取其变化后的监听。Origin 的大小和位置通过 getBoundingClientRect 这一 API 来获取这一就可以开始计算 Overlay 的相对位置。假设我们要把Overlay放在Origin的正下方计算函数应该是这样的。const panelStyle ref({ position: absolute });onMounted(() { const origin originRef.value; const panel panelRef.value; if (!origin || !panel) { return ; } const calculate () { const rect origin.getBoundingClientRect(); // 原点为 origin 元素的底边中央正下方 const originX rect.left (rect.width / 2); const originY rect.bottom; // panel的坐标为到原点的偏移 const panelRect panel.getBoundingClientRect(); const panelX originX - panelRect.width / 2; const panelY originY; // 设置 panel 数据触发节点变更 panelStyle.value.left ${panelX}px; panelStyle.value.top ${panelY}px; };});当然你还可以计算各个不同方向的 Panel 坐标(比如正左、正上、正下等)排列组合一下一共有81种不同的情况(每个点依赖于两个变量 X 和 Y每个变量有三种不同的情况左、中、右或者上、中、下)。监听盒子的变化在这里我们将使用浏览器自带的API 来对他们进行监听。通过 MutationObserver 和 ResizeObserver可以很轻松的监听 Origin 和 Panel 的大小和位置变化。首先是监听 Origin 的大小和位置变化这里采用的是 MutationObserver因为导致位置变化的原因只能是 style所以只需要监听 style 的变化即可。const origin$ new MutationObserver(calculate);origin$.observe(origin, { // 只需要拿到 attribute 的 style 的变化即可 attributeFilter: [style],});Panel 只需要监听其大小的变化大小变化有一个更加完美的API ResizeObserver。const panel$ new ResizeObserver(calculate);panel$.observe(panel);然后需要在dom销毁前取消监听。// dom销毁前取消监听onBeforeUnmount(() { origin$.disconnect(); panel$.disconnect();});监听窗口事件为了能够正确的获取变化我们需要监听两个事件resize 和 scroll.// 为了能够在滚动事件捕获前进行计算带有滚动条的子元素也会因此触发计算window.addEventListener(scroll, calculate, true);window.addEventListener(resize, calculate);最后仍然要在销毁前取消事件。// dom销毁前取消监听onBeforeUnmount(() { window.removeEventListener(scroll, calculate, true); window.removeEventListener(resize, calculate);});至此已经完成基本的双盒子定位法的 Overlay 的设计。小结通过双盒子定位来构建的 Overlay 能够有效规避 CSS 带来的问题 zindex 等一系列相关的问题只用通过计算盒子之间的相对偏移就能让 Panel 附着于 Origin 上这样实现类似下拉或者 Tooltip 等功能的时候就会非常有用。同时附上一个简单例子( http://zcating.gitee.io/testhub/#/overlay)希望能带来一些启发。
