v3-resize

v3-resize

[![NPM version][badge-npm-version]][url-npm] [![Node version][badge-node-version]][url-npm] [![NPM download][badge-npm-download]][url-npm] ![Dependencies][badge-dependencies] ![License][badge-license]

[![NPM][image-npm]][url-npm]

适用于 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>

import useResize from 'v3-resize'

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