vue监听元素高度变化

可以使用Vue的指令 v-resize 来监听元素高度变化。

首先，需要在Vue实例中注册一个全局指令：

Vue.directive('resize', {
  inserted: function (el, binding) {
    let callback = binding.value;
    let observer = new ResizeObserver(() => {
      callback(el.getBoundingClientRect());
    });
    observer.observe(el);
    el._observer = observer;
  },
  unbind: function (el) {
    el._observer.disconnect();
    delete el._observer;
  }
});

然后，可以在需要监听高度变化的元素上使用 v-resize 指令：

<template>
  <div v-resize="onResize">{{content}}</div>
</template>

<script>
export default {
  data() {
    return {
      content: 'Hello World!'
    };
  },
  methods: {
    onResize(rect) {
      console.log(rect.height);
    }
  }
};
</script>

这样，当元素高度发生变化时，会调用 onResize 方法，并传递元素的位置和尺寸信息。在 onResize 方法中，可以根据需要处理元素高度变化的逻辑。