快捷導(dǎo)航

Vue3使用ResizeObserver監(jiān)聽(tīng)元素的尺寸寬度變化

更新時(shí)間：2024年08月08日 09:00:16 作者：努力掙錢(qián)的小鑫

要監(jiān)聽(tīng) div 寬度的變化,可以使用 ResizeObserver 接口,ResizeObserver 允許你觀察一個(gè)或多個(gè)元素的尺寸變化,并在發(fā)生變化時(shí)執(zhí)行回調(diào)函數(shù),所以本文給大家介紹了Vue3如何使用ResizeObserver監(jiān)聽(tīng)元素的尺寸寬度變化,需要的朋友可以參考下

要監(jiān)聽(tīng) div 寬度的變化，可以使用 ResizeObserver 接口。ResizeObserver 允許你觀察一個(gè)或多個(gè)元素的尺寸變化，并在發(fā)生變化時(shí)執(zhí)行回調(diào)函數(shù)。這種方法比使用 MutationObserver 更專(zhuān)注于尺寸變化，且不受元素屬性變化的影響。

使用 ResizeObserver

首先，創(chuàng)建一個(gè) ResizeObserver 實(shí)例，并傳入一個(gè)回調(diào)函數(shù)，該函數(shù)將在元素尺寸變化時(shí)被調(diào)用。在回調(diào)函數(shù)中，你可以訪問(wèn)每個(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');

// 開(kāi)始觀察該元素
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 來(lái)提供跨瀏覽器兼容性。
ResizeObserver 只能觀察到元素的尺寸變化，不能檢測(cè)到元素的內(nèi)容變化或內(nèi)部布局變化。
如果你需要在元素的內(nèi)容或布局變化時(shí)也觸發(fā)事件，可能需要結(jié)合使用其他技術(shù)，如 MutationObserver。

到此這篇關(guān)于Vue3使用ResizeObserver監(jiān)聽(tīng)元素的尺寸寬度變化的文章就介紹到這了,更多相關(guān)Vue3 ResizeObserver監(jiān)聽(tīng)寬度變化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: