Vue3使用ResizeObserver监听元素的尺寸宽度变化

更新时间：2024年08月08日 09:00:16 作者：努力挣钱的小鑫

要监听 div 宽度的变化,可以使用 ResizeObserver 接口,ResizeObserver 允许你观察一个或多个元素的尺寸变化,并在发生变化时执行回调函数,所以本文给大家介绍了Vue3如何使用ResizeObserver监听元素的尺寸宽度变化,需要的朋友可以参考下

使用 ResizeObserver

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

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 中的使用

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>

注意事项

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

到此这篇关于Vue3使用ResizeObserver监听元素的尺寸宽度变化的文章就介绍到这了,更多相关Vue3 ResizeObserver监听宽度变化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue父组件监听子组件数据更新方式(hook)
这篇文章主要介绍了vue父组件监听子组件数据更新方式(hook)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vuejs实现标签选项卡动态更改css样式的方法
这篇文章主要介绍了vuejs实现标签选项卡-动态更改css样式的方法，代码分为html和js两部分,需要的朋友可以参考下
2018-05-05
Vue3如何按照某个字段将数组分成多个数组
这篇文章主要介绍了Vue3如何按照某个字段将数组分成多个数组的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-07-07
Vue+element使用row-class-name修改el-table某一行解决背景色无效的方法
本文主要介绍了Vue+element使用row-class-name修改el-table某一行解决背景色无效的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01
Vue之Pinia状态管理
这篇文章主要介绍了Vue中Pinia状态管理，Pinia开始于大概2019年，其目的是设计一个拥有组合式 API 的 Vue 状态管理库，Pinia本质上依然是一个状态管理库，用于跨组件、页面进行状态共享，感兴趣的同学可以参考阅读
2023-04-04
vue中i18n的安装与几种使用方式详解
在一些网站经常可以看到切换语言包,将网站转化成多种语言版本的情况,下面这篇文章主要给大家介绍了关于vue中i18n的安装与几种使用方式的相关资料,需要的朋友可以参考下
2022-09-09
vue3中vue.config.js配置Element-plus组件和Icon图标实现按需自动引入实例代码
这篇文章主要给大家介绍了关于vue3中vue.config.js配置Element-plus组件和Icon图标实现按需自动引入的相关资料,在Vue 3中可以通过配置vue.config.js文件来进行按需自动引入,需要的朋友可以参考下
2024-02-02
vue3动态路由+动态组件+缓存应用方式
这篇文章主要介绍了vue3动态路由+动态组件+缓存应用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-04-04
vue获取el-form的整体验证状态
本文主要介绍了vue获取el-form的整体验证状态，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
vue3项目新用户引导组件driver.js示例详解
好用的用户引导插件有 intro.js 和 driver.js 两个，对比了一下，最终还是使用了driver.js，这篇文章主要介绍了vue3项目新用户引导组件(driver.js),需要的朋友可以参考下
2022-08-08