Vue3使用ResizeObserver監(jiān)聽元素的尺寸寬度變化
要監(jiān)聽 div 寬度的變化，可以使用 ResizeObserver 接口。ResizeObserver 允許你觀察一個(gè)或多個(gè)元素的尺寸變化，并在發(fā)生變化時(shí)執(zhí)行回調(diào)函數(shù)。這種方法比使用 MutationObserver 更專注于尺寸變化，且不受元素屬性變化的影響。
使用 ResizeObserver
首先，創(chuàng)建一個(gè) ResizeObserver 實(shí)例，并傳入一個(gè)回調(diào)函數(shù)，該函數(shù)將在元素尺寸變化時(shí)被調(diào)用。在回調(diào)函數(shù)中，你可以訪問每個(gè)觀察到的元素的新尺寸。
const resizeObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
const { width, height } = entry.contentRect;
console.log(`Element resized: Width=${width}, Height=${height}`);
});
});
// 假設(shè)你想觀察的元素是一個(gè)具有特定ID的div
const observedElement = document.querySelector('#yourDivId');
// 開始觀察該元素
resizeObserver.observe(observedElement);
// 當(dāng)需要停止觀察時(shí)，可以調(diào)用 disconnect 方法
// resizeObserver.disconnect();
在 vue3 中的使用
const container = ref(null);
let observer;
let resizeTimer;
onMounted(() => {
createObserver();
});
onUnmounted(() => {
if (observer) {
observer.disconnect();
}
});
function createObserver() {
observer = new ResizeObserver((entries) => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
for (const entry of entries) {
const { width, height } = entry.contentRect;
console.log(width);
}
}, 200);
});
observer.observe(container.value);
}
<div ref="container"></div>
注意事項(xiàng)
ResizeObserver是現(xiàn)代瀏覽器支持的 API，不是所有瀏覽器都支持。請(qǐng)確保你的目標(biāo)瀏覽器支持此 API，或者使用 polyfill 來提供跨瀏覽器兼容性。ResizeObserver只能觀察到元素的尺寸變化，不能檢測(cè)到元素的內(nèi)容變化或內(nèi)部布局變化。- 如果你需要在元素的內(nèi)容或布局變化時(shí)也觸發(fā)事件，可能需要結(jié)合使用其他技術(shù)，如
MutationObserver。
到此這篇關(guān)于Vue3使用ResizeObserver監(jiān)聽元素的尺寸寬度變化的文章就介紹到這了,更多相關(guān)Vue3 ResizeObserver監(jiān)聽寬度變化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue父組件監(jiān)聽子組件數(shù)據(jù)更新方式(hook)
這篇文章主要介紹了vue父組件監(jiān)聽子組件數(shù)據(jù)更新方式(hook)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vuejs實(shí)現(xiàn)標(biāo)簽選項(xiàng)卡動(dòng)態(tài)更改css樣式的方法
這篇文章主要介紹了vuejs實(shí)現(xiàn)標(biāo)簽選項(xiàng)卡-動(dòng)態(tài)更改css樣式的方法，代碼分為html和js兩部分,需要的朋友可以參考下2018-05-05
Vue3如何按照某個(gè)字段將數(shù)組分成多個(gè)數(shù)組
這篇文章主要介紹了Vue3如何按照某個(gè)字段將數(shù)組分成多個(gè)數(shù)組的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-07-07
Vue+element使用row-class-name修改el-table某一行解決背景色無效的方法
本文主要介紹了Vue+element使用row-class-name修改el-table某一行解決背景色無效的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了Vue中Pinia狀態(tài)管理，Pinia開始于大概2019年，其目的是設(shè)計(jì)一個(gè)擁有 組合式 API 的 Vue 狀態(tài)管理庫，Pinia本質(zhì)上依然是一個(gè)狀態(tài)管理庫，用于跨組件、頁面進(jìn)行狀態(tài)共享，感興趣的同學(xué)可以參考閱讀2023-04-04
在一些網(wǎng)站經(jīng)?？梢钥吹角袚Q語言包,將網(wǎng)站轉(zhuǎn)化成多種語言版本的情況,下面這篇文章主要給大家介紹了關(guān)于vue中i18n的安裝與幾種使用方式的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue3中vue.config.js配置Element-plus組件和Icon圖標(biāo)實(shí)現(xiàn)按需自動(dòng)引入實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于vue3中vue.config.js配置Element-plus組件和Icon圖標(biāo)實(shí)現(xiàn)按需自動(dòng)引入的相關(guān)資料,在Vue 3中可以通過配置vue.config.js文件來進(jìn)行按需自動(dòng)引入,需要的朋友可以參考下2024-02-02
vue3動(dòng)態(tài)路由+動(dòng)態(tài)組件+緩存應(yīng)用方式
這篇文章主要介紹了vue3動(dòng)態(tài)路由+動(dòng)態(tài)組件+緩存應(yīng)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
本文主要介紹了vue獲取el-form的整體驗(yàn)證狀態(tài)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue3項(xiàng)目新用戶引導(dǎo)組件driver.js示例詳解
好用的用戶引導(dǎo)插件有?intro.js?和?driver.js?兩個(gè)，對(duì)比了一下，最終還是使用了driver.js，這篇文章主要介紹了vue3項(xiàng)目新用戶引導(dǎo)組件(driver.js),需要的朋友可以參考下2022-08-08