Riku
2024-07-08 04e9d32ac49bf5a38adf3cd7dab6bff6e346eefd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//对于对象的引用是弱引用,这意味着在没有其他引用存在时垃圾回收能正确进行。在取消引用时,不需要手动删除元素,因为它们会自动被垃圾回收。
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)
  }
}