插件名称 | vue-drag-resize |
---|---|
版本号 | v2.0.0 |
发布时间 | 2020年7月11日 |
插件作者 | kirillmurashov |
用于可拖动和可调整大小元素的轻量级Vue组件。
# NPM
$ npm install vue-drag-resize --save
v2.0.0(20/07/04)
v1.4.2(07/31/2020)
v1.4.0(07/09/2020)
注册组件:
import Vue from 'vue'
import VueDragResize from 'vue-drag-resize'
Vue.component('vue-drag-resize', VueDragResize)
使用组件:
<template>
<div id="app">
<VueDragResize :isActive="true" :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize">
<h3>Hello World!</h3>
<p>{{ top }} х {{ left }} </p>
<p>{{ width }} х {{ height }}</p>
</VueDragResize>
</div>
</template>
<script>
import VueDragResize from 'vue-drag-resize';
export default {
name: 'app',
components: {
VueDragResize
},
data() {
return {
width: 0,
height: 0,
top: 0,
left: 0
}
},
methods: {
resize(newRect) {
this.width = newRect.width;
this.height = newRect.height;
this.top = newRect.top;
this.left = newRect.left;
}
}
}
</script>