vue3，封装检测元素大小变化的自定义指令

// resizeObserver.ts
// 监听元素大小变化的指令
const map = new WeakMap()
const ob = new ResizeObserver((entries) => {
  for (const entry of entries) {
    // 获取dom元素的回调
    const handler = map.get(entry.target)
    //存在回调函数
    if (handler) {
      // 将监听的值给回调函数
      handler({
        width: entry.borderBoxSize[0].inlineSize,
        height: entry.borderBoxSize[0].blockSize
      })
    }
  }
})

export const Resize = {
  mounted(el: any, binding: any) {
    //将dom与回调的关系塞入map
    map.set(el, binding.value)
    //监听el元素的变化
    ob.observe(el)
  },
  unmounted(el: any) {
    //取消监听
    ob.unobserve(el)
  }
}

export default Resize

// index.ts
import { Resize } from './resizeObserver'

// 自定义指令集合
const directives: any = {
  Resize
}

export default {
  install(app: any) {
    Object.keys(directives).forEach((key) => {
      app.directive(key, directives[key])
    })
  }
}

// 在mian.ts中注册指令
import { createApp } from 'vue'
import directives from '@/utils/directive/index'

const app = createApp(App)
app.use(ElementPlus, {
  locale: en
})
app.use(directives)

使用

<template>
    <div
        id="mapContainer"
        v-resize="onResize"
        class="map-container"
      >
    </div>
</template>

<script setup lang="ts">
    const onResize = (dom: any) => {
      // console.log(dom) // dom为元素变化后的宽高
    }
</script>