【Vue】vue3 中使用 ResizeObserver 监听元素的尺寸宽度变化

努力挣钱的小鑫2024-08-07 17:20

要监听 div 宽度的变化，可以使用 ResizeObserver 接口。ResizeObserver 允许你观察一个或多个元素的尺寸变化，并在发生变化时执行回调函数。这种方法比使用 MutationObserver 更专注于尺寸变化，且不受元素属性变化的影响。

使用 `ResizeObserver`

首先，创建一个 ResizeObserver 实例，并传入一个回调函数，该函数将在元素尺寸变化时被调用。在回调函数中，你可以访问每个观察到的元素的新尺寸。

javascript 复制代码

const resizeObserver = new ResizeObserver(entries => {
  entries.forEach(entry => {
    const { width, height } = entry.contentRect;
    console.log(`Element resized: Width=${width}, Height=${height}`);
  });
});

// 假设你想观察的元素是一个具有特定ID的div
const observedElement = document.querySelector('#yourDivId');

// 开始观察该元素
resizeObserver.observe(observedElement);

// 当需要停止观察时，可以调用 disconnect 方法
// resizeObserver.disconnect();

在 vue3 中的使用

js 复制代码

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);
}

html 复制代码

<div ref="container"></div>

注意事项

ResizeObserver 是现代浏览器支持的 API，不是所有浏览器都支持。请确保你的目标浏览器支持此 API，或者使用 polyfill 来提供跨浏览器兼容性。
ResizeObserver 只能观察到元素的尺寸变化，不能检测到元素的内容变化或内部布局变化。
如果你需要在元素的内容或布局变化时也触发事件，可能需要结合使用其他技术，如 MutationObserver。