在Vue中，你可以使用ResizeObserver来监听DOM元素的宽高变化。以下是一个示例代码：
<template> <div ref="myElement" @resize="handleResize"> <!-- DOM元素内容 --> </div> </template> <script> export default { mounted() { const resizeObserver = new ResizeObserver((entries) => { // 当DOM元素的宽高发生变化时执行回调函数 this.handleResize(entries[0].contentRect); }); resizeObserver.observe(this.$refs.myElement); // 组件销毁时停止观察 this.$once("hook:beforeDestroy", () => { resizeObserver.disconnect(); }); }, methods: { handleResize(rect) { // 在这里处理DOM元素宽高变化后的逻辑 console.log(`宽度：${rect.width}px，高度：${rect.height}px`); }, }, }; </script>
以上示例演示了如何在Vue组件中通过ResizeObserver来监听DOM元素的宽高变化。在mounted钩子中创建ResizeObserver实例，并通过$refs访问DOM元素进行观察。当宽高变化时，会调用handleResize方法进行处理。
另外，你也可以创建一个自定义指令来监听DOM元素的宽高变化。以下是一个自定义指令的示例代码：
<template> <div v-resize="handleResize"> <!-- DOM元素内容 --> </div> </template> <script> export default { directives: { resize: { inserted(el, binding) { const resizeObserver = new ResizeObserver((entries) => { // 当DOM元素的宽高发生变化时执行回调函数 binding.value(entries[0].contentRect); }); resizeObserver.observe(el); // 组件销毁时停止观察 el._resizeObserver_ = resizeObserver; }, unbind(el) { if (el._resizeObserver_) { el._resizeObserver_.disconnect(); delete el._resizeObserver_; } }, }, }, methods: { handleResize(rect) { // 在这里处理DOM元素宽高变化后的逻辑 console.log(`宽度：${rect.width}px，高度：${rect.height}px`); }, }, }; </script>
以上示例演示了如何创建一个自定义指令v-resize，它通过ResizeObserver来监听绑定指令的DOM元素的宽高变化。当宽高变化时，会调用指令绑定值所指定的方法handleResize进行处理。
希望以上代码示例对你有所帮助！
