vue2使用ResizeObserver

Vue2中使用ResizeObserver是为了实现元素大小变化的观察和处理，特别是在响应用户界面调整窗口尺寸或者图片加载完成后自适应布局时非常有用。`ResizeObserver`是一个现代浏览器提供的API，它允许开发者监听元素的尺寸变化。

要在Vue2项目中使用`ResizeObserver`，首先需要安装相应的依赖，例如使用`vue-resize-detector`这样的库，它提供了一个易于使用的Vue组件化解决方案：

1. 安装依赖：

npm install vue-resize-detector

或

yarn add vue-resize-detector

2. 在组件中引入并使用：

<template>
  <div ref="resizeDetector"></div>
</template>

<script>
import ResizeDetector from 'vue-resize-detector';

export default {
  components: {
    ResizeDetector,
  },
  data() {
    return {
      isResized: false,
    };
  },
  mounted() {
    this.resizeDetector = new ResizeDetector(this.$refs.resizeDetector, {
      // 可选配置选项
      listeners: {
        resize: (entry) => {
          this.isResized = true;
          // 在这里处理尺寸变化，比如更新样式或数据
          console.log('Element resized:', entry.target);
        },
        end: () => {
          this.isResized = false;
        },
      },
    });
  },
  beforeDestroy() {
    if (this.resizeDetector) {
      this.resizeDetector.unobserve();
      this.resizeDetector.destroy();
    }
  },
};
</script>

在这个例子中，我们创建了一个`ResizeDetector`实例，并在元素挂载后开始监听大小变化。当有元素尺寸变化时，回调函数会被触发，你可以根据需要更新UI状态。