【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
相关推荐
群联云防护小杜14 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB2427 分钟前
html复习
javascript·microsoft·html
汉得数字平台32 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹38 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦7 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows