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

要监听 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
相关推荐
gongzemin几秒前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox13 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号952718 分钟前
【JavaScript】十四、轮播图
javascript·css·css3
麦麦大数据36 分钟前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
树上有只程序猿41 分钟前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187301 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox