//对于对象的引用是弱引用,这意味着在没有其他引用存在时垃圾回收能正确进行。在取消引用时,不需要手动删除元素,因为它们会自动被垃圾回收。
|
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: Math.ceil(entry.borderBoxSize[0].inlineSize), //元素的宽度
|
height: Math.ceil(entry.borderBoxSize[0].blockSize) //元素的高度
|
})
|
}
|
}
|
})
|
|
//获取使用指令的div的宽高.e.width和e.height
|
export const vResize = {
|
mounted(el, binding) {
|
// 将元素和回调函数存入map中
|
map.set(el, binding)
|
// 开始观察元素
|
divs.observe(el)
|
},
|
unmounted(el) {
|
// 停止观察元素
|
divs.unobserve(el)
|
}
|
}
|