元素尺寸监听指令

// src/directive/vResize.ts
import { Directive, DirectiveBinding } from "vue";
import _ from 'lodash'

const wMap = new WeakMap()

const sizeObserver = new ResizeObserver((entries) => callback(entries))

function callback(entries: ResizeObserverEntry[]) {
    for (const entry of entries) {
        wMap.get(entry.target)(entry)
    }
}

const vResize: Directive = {
    mounted(ele: HTMLElement, binding: DirectiveBinding<Function>) {
        wMap.set(ele, binding.arg ? _.debounce(binding.value, Number(binding.arg)) : binding.value)
        sizeObserver.observe(ele)
    },
    unmounted(ele) {
        sizeObserver.unobserve(ele)
    },
}

export default vResize

// src/directive/index.ts
import { App } from 'vue'
import resize from './vResize'

const directives: any = {
    resize,
}

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

// src/main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import directive from './directives'

const app = createApp(App)
directive(app)

app.mount('#app')

<template>
    <div style="width: 80%; height: 200px; background-color: black;" v-resize:2000="resize"></div>
    <div style="width: 80%; height: 200px; background-color: black;" v-resize="resize2"></div>
</template>

<script setup lang="ts">
    function resize(entry: ResizeObserverEntry) {
        console.log(entry);
    }

    function resize2(entry: ResizeObserverEntry) {
        console.log(entry);
    }
</script>

<style scoped lang="scss"></style>