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


Posted in Vue.js onDecember 22, 2020

在 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的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
vue监听键盘事件的相关总结
Jan 29 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
springboot+VUE实现登录注册
May 27 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
详解Vue的异步更新实现原理
Dec 22 #Vue.js
Vue组件简易模拟实现购物车
Dec 21 #Vue.js
vue实现购物车的小练习
Dec 21 #Vue.js
Vue实现小购物车功能
Dec 21 #Vue.js
vue监听滚动事件的方法
Dec 21 #Vue.js
vue el-upload上传文件的示例代码
Dec 21 #Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 #Vue.js
You might like
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
JS 建立对象的方法
2007/04/21 Javascript
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
python3转换code128条形码的方法
2019/04/17 Python
Django实现跨域的2种方法
2019/07/31 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
python中open函数的基本用法示例
2019/09/07 Python
python让函数不返回结果的方法
2020/06/22 Python
Django跨域请求原理及实现代码
2020/11/14 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
你对IPv6了解程度
2016/02/09 面试题
什么是Remote Module
2016/06/10 面试题
退学证明范本3篇
2014/10/29 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书