position定位 响应式_使用 Vue3 实现双盒子定位 Overlay
之前说过,使用 可以很优雅的把某个组件渲染到根节点之外的节点,同时使其渲染的内容不丧失响应式和对应的生命周期函数调用。那么基于此,用 实现相对于某一元素的 Overlay 。
实际上,这篇文章跟 Vue3 的关系不大,只是通过 Vue3 讲解一类 Overlay 的设计方法。
原理
要实现相对于某一元素的 Overlay 需要依靠两个元素,Origin 和 Panel,Origin 表示相对于的元素,而 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),希望能带来一些启发。
position定位 响应式_使用 Vue3 实现双盒子定位 Overlay相关推荐
- canvas画布响应式_检查响应式导航:离开画布模式
canvas画布响应式 在本教程中,我们将遍历四种模式的变体,其中导航和页面内容放在画布之外,以节省空间,直到请求. 是时候停止复制和粘贴了,让我们开始理解! 回顾一下,本系列文章的第一个重点是导航保 ...
- html5 css 响应式_在HTML5 / CSS3中编写响应式简历
本文是我们的" Web响应式设计系列"的一部分,该系列由工具,资源和教程组成,可帮助您为所有平台的用户创建网站. 单击此处查看同一系列的更多文章. 业务部分的几乎每个人都在某个时间 ...
- web 响应式_建立响应式Web简历
web 响应式 I recently received a question from a reader regarding development of a single-page HTML rés ...
- window safari 怎么进入响应式_响应式网站怎么做?模板教程来了
随着移动端网站访问需求增加,"响应式网站"越来越受到用户欢迎.到底什么叫响应式网站呢? 其实就是网站效果可以随着屏幕尺寸大小而自适应,不会发生变形.扭曲.缺失的现象.不管你是在使用 ...
- antv图表 根据屏幕大小响应式_做可交互的统计图表,这套图形语法不容错过
选好可视化 "一图胜千言",是最直观的数据可视化魅力.以图表来传达和沟通信息,其效率远超枯燥乏味的数据表达. 有需求就有市场.数据可视化崭露头角后,各个厂商出备的产品.解决方案,开 ...
- linux 定位 踩内存_运维必备的问题定位工具及案例分析
[摘要]本文主要介绍各种问题定位的工具,并结合案例分析问题. 1. 背景 有时候会遇到一些疑难杂症,并且监控插件并不能一眼立马发现问题的根源.这时候就需要登录服务器进一步深入分析问题的根源.那么分析问 ...
- html5经纬度定位 源码_基于浏览器的HTML5地理定位
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理和一个 ...
- onenetsim定位功能吗_微信小程序新增后台定位功能,你会卸载地图APP用微信导航吗...
[PConline]8月8日,根据微信官方发布的消息显示,小程序新增后台定位功能,并对自动化测试功能进行了升级.据介绍,为了满足线路导航.路线记录等服务场景下,小程序需要长时间持续定位来提供服务.当用 ...
- rssi室内定位算法原理_基于RSSI的精确室内定位算法
基于 RSSI 的精确室内定位算法 何山 [期刊名称] <现代电信科技> [年 ( 卷 ), 期] 2011(000)003 [摘要] 无线传感器网络的关健问题是实现节点的精确定位 . 为 ...
最新文章
- 【iOS与EV3混合机器人编程一系列五个】iOS_WiFi_EV3_Library 解剖连接EV3
- leetcode[217].存在重复元素
- Python--day60--一个简单(不完整)的web框架
- div 设置a4大小_如何在A4纸张尺寸页面制作HTML页面?
- eNSP模拟器RIP2动态路由,DHCP服务,ACL流控,组合使用的拓扑网络
- jquery教程_jQuery教程
- 自己动手源码包制作rpm 包 (二)
- 武大高级软件工程2017评分汇总
- 酒店管理系统c语言课程设计,基于C语言的酒店管理系统课程设计.doc
- 解决:cannot deserialize from Object value (no delegate- or property-based Creator)
- word排版教程-----------技巧
- 人体姿态识别研究综述(详细归纳!)
- 虚幻4 配置打包安卓
- 服务器iscsi如何修复,服务器重启后,iSCSI目标卡住了重新连接
- HTML的发展史及背景,HTML发展史 - 蓝蓝设计每日一贴
- maka做出好设计_MAKA下载-MAKA做出好设计最新版v4.15.1下载
- Java抽象类和接口使用_Java 抽象类和接口
- 哪些IC设计公司会在CMMB竞争中突围?
- 还不知道 Puppeteer 的注意了,它能干大事
- SF31丨构建抄底摸顶策略的一小步
热门文章
- .net core自定义高性能的Web API服务网关
- DDD理论学习系列(4)-- 领域模型
- OSS.Social微信项目标准库介绍
- ASP.NET Core 1.0中的管道-中间件模式
- android自动跑马灯,Android-最强跑马灯
- Mysql-索引的基础和类型
- Google 开源的 Android 排版库:FlexboxLayout
- 关于jQuery.query.js 取参数的一个小问题
- 【ArcGIS微课1000例】0013:ArcGIS创建色带图例(以GlobeLand30土地覆盖数据为例)
- 【PhotoScan精品教程】任务一:新建工程、导入照片、设置坐标系、导入控制点(POS)、自由空三