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的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 雷军等三大高管齐晒小米12新机:仅卢伟冰
- 下一篇: vue限制点击次数_解决vue 按钮多次