v-resize-rf 包

包说明

监听元素宽高变化

Installing

Using npm:

npm install v-resize-rf

Using pnpm:

pnpm install v-resize-rf

自定义Hooks

<template>
    <div id="resize">
        我是testBox
    </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import vResizeRf from "v-resize-rf";
onMounted(() => {
    vResizeRf(document.getElementById("resize") as HTMLElement, (e: any) => {
        console.log(e)
    })
})
</script>
<style lang="scss" scoped>
#resize {
    width: 100px;
    height: 100px;
    background-color: aqua;
    border: 1px solid black;
    resize: both;
    overflow: hidden
}
</style>

自定义指令 v-resize-rf

// main.ts

import useResize from "v-resize-rf";

const app = createApp(App);

app.use(useResize)

<template>
    <div id="resize" v-resize-rf="getData">
        我是testBox2
    </div>
</template>

<script setup lang="ts">
const getData = (e: any) => {
    console.log(e, 'resize')
}
</script>