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

网络编程 2024/12/22 佚名

3 1 2

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

原理

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

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

setup(_, ctx) {
 const originRef = ref<HTMLElement>();
 const panelRef = ref<HTMLElement>();
 const panelStyle = ref<CSSProperties>({ position: 'absolute' });
 // ...
 return () => (
  <>
   <div ref={originRef}>origin</div>

   <Teleport to="#cdk-overlay-anchor">
     <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, height: '100vh', width: '100vw' pointerEvents: 'none'}}>
      <div ref={panelRef} style={panelStyle.value}>
       <div style={{height: '100px', width: '100px' border: '1px solid black'}} />
      </div>
     </div>
   </Teleport>
  </>
 );
}

拿到这两者的 dom ref 后，需要通过实时计算 Origin 的盒子的大小和位置，来获得 Panel 的相对偏移。在 Vue 中，元素只有在 mounted 后才能获取得到，所以可以通过 composition-api 的 onMouted 来获取具体元素。然后再在生命周期中进行计算。

计算两个盒子的相对位置

如何计算 Origin 的大小和位置，以及获取其变化后的监听。Origin 的大小和位置，通过 getBoundingClientRect 这一 API 来获取，这一就可以开始计算 Overlay 的相对位置。假设我们要把 Overlay 放在 Origin 的正下方，计算函数应该是这样的。

const panelStyle = ref<CSSProperties>({ 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 坐标（比如，正左、正上、正下等），排列组合一下，一共有种27不同的情况（每个点依赖于两个变量 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 等功能的时候，就会非常有用。同时，附上一个简单例子，希望能带来一些启发。

以上就是Vue3 实现双盒子定位Overlay的示例的详细内容，更多关于vue3 实现Overlay的资料请关注其它相关文章！

vue3,实现Overlay,vue,双盒子定位

风云阁资源网 Design By www.bgabc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

风云阁资源网 Design By www.bgabc.com

评论“Vue3 实现双盒子定位Overlay的示例”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月22日