vue中怎么监测一个div的宽度变化

2026年3月10日 10:55

在 Vue 中监测一个 div 的宽度变化，可以使用以下几种方法，主要结合 ResizeObserver 或其他方式来实现动态监听。以下是具体实现方案：

方法 1：使用 ResizeObserver

ResizeObserver 是现代浏览器提供的 API，专门用于监听元素尺寸变化。它性能高效，适合动态监测 div 的宽度变化。

<template>
  <div ref="targetDiv" class="target-div">
    这是一个可调整大小的 div
  </div>
</template>

<script>
export default {
  data() {
    return {
      divWidth: 0,
    };
  },
  mounted() {
    // 创建 ResizeObserver 实例
    const observer = new ResizeObserver((entries) => {
      for (let entry of entries) {
        // 获取 div 的宽度
        this.divWidth = entry.contentRect.width;
        console.log('Div 宽度变化:', this.divWidth);
      }
    });

    // 监听目标 div
    observer.observe(this.$refs.targetDiv);
    
    // 组件销毁时清理 observer
    this.$on('hook:beforeDestroy', () => {
      observer.disconnect();
    });
  },
};
</script>

<style>
.target-div {
  width: 200px;
  height: 100px;
  background: lightblue;
  resize: horizontal; /* 允许水平拖动调整大小 */
  overflow: auto;
}
</style>

说明：

ResizeObserver 会在 div 尺寸变化时触发回调，获取最新的宽度。
使用 this.$refs.targetDiv 获取 DOM 元素。
在组件销毁时调用 observer.disconnect() 清理监听，避免内存泄漏。
resize: horizontal 是 CSS 属性，方便测试宽度调整（需要配合 overflow: auto）。

方法 2：结合 Vue 的 watch 监听动态宽度

如果 div 的宽度是由响应式数据（如 style 或计算属性）控制的，可以通过 watch 监听相关数据的变化。

<template>
  <div :style="{ width: divWidth + 'px' }" class="target-div">
    宽度: {{ divWidth }}px
  </div>
</template>

<script>
export default {
  data() {
    return {
      divWidth: 200,
    };
  },
  watch: {
    divWidth(newWidth) {
      console.log('Div 宽度变化:', newWidth);
    },
  },
};
</script>

<style>
.target-div {
  height: 100px;
  background: lightcoral;
}
</style>

说明：

适用于宽度由 Vue 响应式数据驱动的场景。
如果宽度变化是由外部（如用户拖动或 CSS）引起的，这种方法不适用。

方法 3：使用 window resize 事件（间接监测）

如果 div 的宽度变化与窗口大小相关（例如百分比宽度），可以监听 window 的 resize 事件。

<template>
  <div ref="targetDiv" class="target-div">
    这是一个宽度随窗口变化的 div
  </div>
</template>

<script>
export default {
  data() {
    return {
      divWidth: 0,
    };
  },
  methods: {
    updateWidth() {
      this.divWidth = this.$refs.targetDiv.offsetWidth;
      console.log('Div 宽度:', this.divWidth);
    },
  },
  mounted() {
    this.updateWidth(); // 初始化宽度
    window.addEventListener('resize', this.updateWidth);
    
    // 清理事件监听
    this.$on('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.updateWidth);
    });
  },
};
</script>

<style>
.target-div {
  width: 50%; /* 宽度随窗口变化 */
  height: 100px;
  background: lightgreen;
}
</style>

说明：

适合 div 宽度依赖窗口大小的场景（如 width: 50%）。
使用 offsetWidth 获取 div 的实际宽度。
注意清理事件监听以防止内存泄漏。

方法 4：使用第三方库（如 element-resize-detector）

如果需要兼容旧浏览器或更复杂的场景，可以使用第三方库如 element-resize-detector。

安装库：
```
npm install element-resize-detector
```
在 Vue 组件中使用：

<template>
  <div ref="targetDiv" class="target-div">
    这是一个可调整大小的 div
  </div>
</template>

<script>
import elementResizeDetectorMaker from 'element-resize-detector';

export default {
  data() {
    return {
      divWidth: 0,
    };
  },
  mounted() {
    const erd = elementResizeDetectorMaker();
    erd.listenTo(this.$refs.targetDiv, (element) => {
      this.divWidth = element.offsetWidth;
      console.log('Div 宽度变化:', this.divWidth);
    });

    // 清理监听
    this.$on('hook:beforeDestroy', () => {
      erd.removeAllListeners(this.$refs.targetDiv);
    });
  },
};
</script>

<style>
.target-div {
  width: 200px;
  height: 100px;
  background: lightyellow;
  resize: horizontal;
  overflow: auto;
}
</style>

说明：

element-resize-detector 提供了跨浏览器兼容的尺寸变化监听。
适合不支持 ResizeObserver 的旧浏览器。

注意事项

性能：避免在大量元素上绑定监听，可能导致性能问题。
清理：总是清理 ResizeObserver、事件监听或第三方库的绑定，防止内存泄漏。
浏览器兼容性：ResizeObserver 在现代浏览器（Chrome 64+、Firefox 69+ 等）支持良好，旧浏览器需 polyfill 或使用第三方库。

阅读视图