vue3监听div高宽变化自定义分析

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>