vue3中元素盒子尺寸变化时的问题

sizeDirect.js

　　

// 此案例可以作为Vue自定义指令的参考，实现元素尺寸变化的监听，并执行回调函数。
// 注意：此案例仅供参考，具体业务场景需要根据实际情况进行修改。

const map = new WeakMap() // 弱引用，可以被垃圾回收机制回收，可以用来保存DOM节点，不容易造成内存泄漏

const ob = new ResizeObserver((entries)=>{
   for(const entry of entries) {
       // 运行回调 
        console.log(entry,'entry');
        const handle = map.get(entry.target) // 获取绑定的值
        handle && handle({   // 执行回调,传递参数
            width:entry.contentRect.width,  // 元素的宽高  
            height:entry.contentRect.height  // 元素的宽高
        }) // 执行绑定的值
    }
})


export default{
    mounted(el,binding){
        ob.observe(el)  // 监听元素尺寸变化
        map.set(el,binding.value)  // 保存绑定的值
    },
    unmounted(el){
        ob.unobserve(el) // 停止监听
        // map.delete(el) // 删除绑定的值,上面使用的是WeakMap，所以这边不需要手动删除  
    }
}