安装：
npm install --save vue-draggable-resizable
第一种：基本使用：
<template><div style="height: 500px; width: 500px; border: 1px solid red; position: relative;"><vue-draggable-resizable :w="100" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true"><p>Hello! I'm a flexible component. You can drag me around and you can resize me.<br>X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p></vue-draggable-resizable></div></template><script>import VueDraggableResizable from 'vue-draggable-resizable'export default {data: function () {return {width: 0,height: 0,x: 0,y: 0}},components:{VueDraggableResizable },methods: {onResize: function (x, y, width, height) {this.x = xthis.y = ythis.width = widththis.height = height},onDrag: function (x, y) {this.x = xthis.y = y}}}</script>
第二种： 滚轮缩放
<template><div class="is"><divstyle="height: 800px; width: 100%; border: 1px solid #000; position: relative; overflow: hidden;background-color: #03071C"><!-- 引入组件. :lock-aspect-ratio="true"：锁定纵横比例 :resizable="false": 不可缩放--><vue-draggable-resizablew="auto"h="auto":grid="[20,40]":x="10":y="10":resizable="false"><div class="table" ref="table" @wheel.prevent="handleTableWheel($event)"><div style="width:400px;height:400px;border:1px solid #333">11111</div><!-- <img src="@/assets/test.png" alt=""> --></div></vue-draggable-resizable></div></div></template><script>import VueDraggableResizable from "vue-draggable-resizable";export default {name: "test1",data() {return {};},mounted() {},methods: {handleTableWheel(event) {let obj = this.$refs.table;return this.tableZoom(obj, event);},tableZoom(obj, event) {// 一开始默认是100%let zoom = parseInt(obj.style.zoom, 10) || 100;// 滚轮滚一下wheelDelta的值增加或减少120zoom += event.wheelDelta / 12;if (zoom > 0) {obj.style.zoom = zoom + "%";}return false;},}};</script>
参数：
1.active–是否激活
Type: Boolean
Required: false
Default: false
<vue-draggable-resizable :active="true">
2.draggable–是否可拖拽
Type: Boolean
Required: false
Default: true
<vue-draggable-resizable :draggable="false">
3.resizable–是否可缩放
Type: Boolean
Required: false
Default: true
<vue-draggable-resizable :resizable="false">
4.w–初始宽度
Type: Number
Required: false
Default: 200
<vue-draggable-resizable :w="200">
5.h–初始高度
Type: Number
Required: false
Default: 200
<vue-draggable-resizable :h="200">
6.minw–最小宽度
Type: Number
Required: false
Default: 50
<vue-draggable-resizable :minw="50">
7.minh–最小高度
Type: Number
Required: false
Default: 50
<vue-draggable-resizable :minh="50">
8.x–初始位移x
Type: Number
Required: false
Default: 0
<vue-draggable-resizable :x="0">
9.y-初始位移y
Type: Number
Required: false
Default: 0
<vue-draggable-resizable :y="0">
10.z–显示层级
Type: Number|String
Required: false
Default: auto
<vue-draggable-resizable :z="999">
11.handles–控制区域
Type: Array
Required: false
Default: [‘tl’, ‘tm’, ‘tr’, ‘mr’, ‘br’, ‘bm’, ‘bl’, ‘ml’]
tl - Top left
tm - Top middle
tr - Top right
mr - Middle right
br - Bottom right
bm - Bottom middle
bl - Bottom left
ml - Middle left
<vue-draggable-resizable :handles="['tm','bm','ml','mr']">
12：axis–设置拖拽方向（x,y,both）
Type: String
Required: false
Default: both
<vue-draggable-resizable axis="x">
13: grid–网格移动
Type: Array
Required: false
Default: [1,1]
<vue-draggable-resizable :grid="[1,1]">
14： parent–限制在父元素内移动
Type: Boolean
Required: false
Default: false
<vue-draggable-resizable :parent="true">
15：dragHandle–定义拖拽元素
Type: String
Required: false
<vue-draggable-resizable drag-handle=".drag">
16： dragCancel–定义应用于防止拖动初始化的选择器。
Type: String
Required: false
<vue-draggable-resizable drag-cancel=".drag">
17： maximize–如果设置为true，则双击时允许组件填充其父组件
Type: Boolean
Required: false
Default: false
<vue-draggable-resizable :maximize="true">
事件：
1.activated
Required: false
Parameters: -
每当单击组件时调用，以显示句柄
<vue-draggable-resizable @activated="onActivated">
2.deactivated
Required: false
Parameters: -
每当用户单击组件外部的任何位置以停用组件时调用。
<vue-draggable-resizable @deactivated="onDeactivated">
3.resizing
Required: false
Parameters:
X位置
Y位置
元素的宽度
元素高度
每当调整组件的大小时调用。
<vue-draggable-resizable @resizing="onResizing">
4.resizestop
Required: false
Parameters:
X位置
Y位置
元素的宽度
元素高度
组件停止调整大小时调用
<vue-draggable-resizable @resizestop="onResizstop">
5.dragging
Required: false
Parameters:
X位置
Y位置
拖动组件时调用
<vue-draggable-resizable @dragging="onDragging">
6.dragstop
Required: false
Parameters:
X位置
Y位置
停止拖动时调用
<vue-draggable-resizable @dragstop="onDragstop">
引用：/package/vue-draggable-resizable#demo
