安装

npm i v-resize-songzx

使用方式一

全局注册 v-resze 指令

main.ts 引入

import useResize from "v-resize-songzx";

const app = createApp(App)

app.use(useResize)
app.mount('#app')

<template>
  <div class="resize" v-resize="getNewWH"></div>
</template>

<script setup lang="ts">
const getNewWH = (e) => {
  console.log(e.contentRect.width, e.contentRect.height);
}

</script>

<style scoped>
/*把一个元素设置成可以改变宽高的样子*/
.resize {
  resize: both;
  width: 200px;
  height: 200px;
  border: 1px solid;
  overflow: hidden;
}
</style>

使用方式二

使用Hook的方式

<template>
  <div class="resize"></div>
</template>

<script setup lang="ts">

import useResize from "v-resize-songzx";

onMounted(() => {
  useResize(document.querySelector(".resize"), e => {
    console.log(e.contentRect.width, e.contentRect.height);
  })
})

</script>

<style scoped>
/*把一个元素设置成可以改变宽高的样子*/
.resize {
  resize: both;
  width: 200px;
  height: 200px;
  border: 1px solid;
  overflow: hidden;
}
</style>