vue中怎么实时监听div元素盒子的宽高

• 在Vue中实时监听div盒子的宽高可以使用resize事件结合refs来实现。

  首先，在div盒子上添加一个ref属性，例如：

  <div ref="box"></div>

  然后，在Vue组件的mounted生命周期钩子中添加事件监听：

  mounted() {
    window.addEventListener('resize', this.handleResize)
  },

  在Vue组件的methods中定义handleResize方法来处理宽高变化：

  methods: {
    handleResize() {
      const width = this.$refs.box.offsetWidth;
      const height = this.$refs.box.offsetHeight;
      
      // 在这里处理宽高变化的逻辑
      console.log('盒子宽度:', width, '盒子高度:', height);
    }
  },

  这样，每当窗口大小改变时，handleResize方法将被调用并获取到最新的宽高值。你可以在该方法中处理宽高变化的逻辑，例如更新数据、触发其他操作等。

  记得在Vue组件销毁时，移除事件监听：

  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },

  这样就能实时监听div盒子的宽高了。