感知元素宽高变化的开源 vue

对于感知元素宽高变化的开源 Vue 组件，我建议你试试 `vue-resize`。它是一个基于 Vue 的指令，用于监听元素的大小变化。你可以在 Vue 项目中使用它来感知元素的宽高变化，并做出相应的处理。

使用 `vue-resize` 很简单，你只需要在需要监听大小变化的元素上添加 `v-resize` 指令即可。然后，你可以在对应的方法中获取到元素的宽高信息，并进行相关操作。

以下是一个简单的示例：

首先，安装 `vue-resize`：

npm install vue-resize

然后，在你的 Vue 组件中引入和注册 `vue-resize`：

import VueResize from 'vue-resize';

export default {
  directives: {
    resize: VueResize,
  },
  methods: {
    handleResize() {
      // 在这里处理元素的宽高变化
      const width = this.$el.offsetWidth;
      const height = this.$el.offsetHeight;
      console.log('元素宽度：', width);
      console.log('元素高度：', height);
    },
  },
};

最后，在需要监听大小变化的元素上添加 `v-resize` 指令，并绑定对应的方法：

<template>
  <div v-resize="handleResize">我是一个需要监听大小变化的元素</div>
</template>

这样，当该元素的大小发生变化时，`handleResize` 方法会被调用，并可以获取到元素的宽高信息。

希望对你有帮助！如果有更多问题，请随时提问。