vue监听盒子宽度变化

在Vue.js中，如果你想监听元素宽度的变化，可以使用`v-once`指令结合`MutationObserver`或者`ref`配合`@input`事件。以下是两种常见的方法：

1. 使用`MutationObserver`：

<template>
  <div v-ref="myDiv" :style="{ width: myWidth }">
    <!-- 元素内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      myWidth: 'initial-width', // 初始宽度值
    };
  },
  mounted() {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.type === 'attributes') {
          if (mutation.attributeName === 'style' && mutation.target.id === this.$refs.myDiv.id) {
            this.myWidth = mutation.target.style.width;
          }
        }
      });
    });

    // 观察元素width属性的变化
    observer.observe(this.$refs.myDiv, { attributes: true });
  },
  beforeDestroy() {
    observer.disconnect(); // 移除观察者，在组件卸载前停止监听
  },
};
</script>

2. 使用`ref`配合`@input`：

<template>
  <div ref="myDiv" @input="handleWidthChange"></div>
</template>

<script>
export default {
  methods: {
    handleWidthChange() {
      this.myWidth = this.$refs.myDiv.offsetWidth; // 监听宽度变化并更新数据
    },
  },
};
</script>

这两种方法都可以让你在Vue实例中实时地获取到元素宽度的变化。