vue2监听盒子变化自定义指令

项目中有监听盒子变化的需求，就写了一个自定义指令然后ai优化了下当做笔记，下次cv用

// 导入 Vue
import Vue from 'vue'

// 创建一个 Map 用于保存 DOM 元素和对应的 ResizeObserver 实例及回调函数
const resizeObserverMap = new Map()

// 定义一个名为 resize 的全局自定义指令
Vue.directive('resize', {
  // 当被绑定的元素插入到 DOM 中时触发
  inserted(el, binding) {
    // 创建 ResizeObserver 实例
    const observer = new ResizeObserver((entries) => {
      // 遍历所有 ResizeObserverEntry 实例
      entries.forEach((entry) => {
        // 调用外部传入的回调函数，并将 entry 作为参数传递
        binding.value(entry)
      })
    })

    // 开始观察指定的元素
    observer.observe(el)

    // 将 observer 实例和回调函数保存到 Map 中，以便稍后可以在 unbind 钩子中断开观察
    resizeObserverMap.set(el, { observer, callback: binding.value })
  },

  // 当绑定的元素从 DOM 中解绑时触发
  unbind(el) {
    // 从 Map 中获取保存的 ResizeObserver 实例和回调函数
    const { observer, callback } = resizeObserverMap.get(el)
    if (observer) {
      // 停止观察并断开与 DOM 元素的关联
      observer.disconnect()
      resizeObserverMap.delete(el)
    }
  }
})