resizeObserver.ts

//对于对象的引用是弱引用，这意味着在没有其他引用存在时垃圾回收能正确进行。在取消引用时，不需要手动删除元素，因为它们会自动被垃圾回收。
const map = new WeakMap();// ResizeObserver是一个构造函数，用于监听元素的变化，当元素的尺寸发生变化时，会触发回调函数。
const divs = new ResizeObserver((entries) => {// entries是一个数组，包含所有被观察的元素的信息for (const entry of entries) {// 将元素和回调函数取出const handler = map.get(entry.target);// 如果回调函数存在，则调用回调函数if (handler) {handler({width: entry.borderBoxSize[0].inlineSize, //元素的宽度height: entry.borderBoxSize[0].blockSize, //元素的高度});}}
});//获取使用指令的div的宽高.e.width和e.height
export const vResize = {mounted(el: Element, binding: any) {// 将元素和回调函数存入map中map.set(el, binding.value);// 开始观察元素divs.observe(el);},unmounted(el: Element) {// 停止观察元素divs.unobserve(el);},
};

vue文件：

<template><div class="demoDiv" v-resize="getStyle"></div>
</template>
<script setup lang="ts">
import { vResize } from "./resizeObserver";
interface divStyle {width: number;height: number;
}
const getStyle = (e: divStyle) => {console.log(e.width, e.height);
};
</script>
<style scoped>
.demoDiv {width: 100%;height: 100%;background-color: #000;
}
</style>