【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
相关推荐
蒜蓉大猩猩8 分钟前
Vue.js - 组件化编程
开发语言·前端·javascript·vue.js·前端框架·ecmascript
Clockwiseee28 分钟前
JS原型、原型链以及原型链污染学习
javascript·学习·原型模式
王解39 分钟前
一篇文章读懂 Prettier CLI 命令:从基础到进阶 (3)
前端·perttier
乐闻x44 分钟前
最佳实践:如何在 Vue.js 项目中使用 Jest 进行单元测试
前端·vue.js·单元测试
遇到困难睡大觉哈哈1 小时前
JavaScript面向对象
开发语言·javascript·ecmascript
檀越剑指大厂1 小时前
【Python系列】异步 Web 服务器
服务器·前端·python
我是Superman丶1 小时前
【前端】js vue 屏蔽BackSpace键删除键导致页面后退的方法
开发语言·前端·javascript
Hello Dam1 小时前
基于 Spring Boot 实现图片的服务器本地存储及前端回显
服务器·前端·spring boot
小仓桑1 小时前
利用 Vue 组合式 API 与 requestAnimationFrame 优化大量元素渲染
前端·javascript·vue.js
Hacker_xingchen1 小时前
Web 学习笔记 - 网络安全
前端·笔记·学习