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在图片上传的时候压缩图片
Nov 18 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
关于vue-router-link选择样式设置
Apr 30 Vue.js
vue中data里面的数据相互使用方式
Jun 05 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 array_walk() 数组函数
2011/07/12 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
脚本收藏iframe
2006/07/21 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
python如何求解两数的最大公约数
2018/09/27 Python
Pandas之缺失数据的实现
2021/01/06 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
法学院毕业生求职信
2014/06/25 职场文书
离婚协议书范本样本
2014/08/19 职场文书
个人授权委托书格式
2014/08/30 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
2015入党自传格式范文
2015/06/26 职场文书
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server