vue2创建自定义指令resize监听dom元素大小变化

1.创建sizeDirect.js文件

// 相对map 不回造成内存泄露
const map = new WeekMap()
// ob监听
const ob = new ResizeObserver((entries) => {
  for (const entry of entries) {
    // 处理元素对应的回调
    const handler = map.get(entry.target)
    if (handler) {
      const box = entry.borderBoxSize[0]
      handler({
        width: box.inlineSize,
        height: box.blockSize,
      })
    }
  }
})
export default {
  inserted(el, binding) {
    // 监听el元素尺度的变化
    map.set(el, binding.value)
  },
  unbind(el) {
    // 取消监听
    ob.unobserve(el)
  },
}

2.在main.js全局注册或者组件内注册

import sizeDirect from "@/utils/sizeDirect.js"

Vue.directive('ob-size',sizeDirect)

3.在页面使用

<div v-ob-size="handleSizeChange"></div>

handleSizeChange(size){

        console.log(size)

}