v3-resize

v3-resize

适用于 Vue 3.0 的计算元素实时宽高的指令。

安装

$ npm i -S v3-resize

使用

hooks 方式

<template>
  <div id="resize">
    拖拽获取实时尺寸
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import useResize from 'v3-resize'
onMounted(() => {
  useResize(document.querySelector('#resize'), (e) => {
    console.log(e)
  })
})
</script>

<style lang="scss" scoped>
#resize {
  border: 1px solid #ccc;
  resize: both;
  overflow: hidden;
}
</style>

指令方式

<template>
  <div id="resize" v-resize="resize">
    拖拽获取实时尺寸
  </div>
</template>

<script setup>
const resize = (e) => {
  console.log(e)
}
</script>

<style lang="scss" scoped>
#resize {
  border: 1px solid #ccc;
  resize: both;
  overflow: hidden;
}
</style>

main.js

import useResize from 'v3-resize'

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