vue-draggable-resizable
1、安装
npm install --save vue-draggable-resizable
2、引用
import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
// optionally import default styles
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
Vue.component('vue-draggable-resizable', VueDraggableResizable)
3、Props
用于设置可拖动可调整大小组件的自定义类。class-name
<vue-draggable-resizable class-name="my-class">
启用可拖动时，用于设置可拖动可调整大小组件的自定义类。
<vue-draggable-resizable class-name-draggable="my-draggable-class">
当启用可调整大小时，用于设置可拖动可调整大小组件的自定义类。
<vue-draggable-resizable class-name-resizable="my-resizable-class">
用于在拖动时设置可拖动的可调整大小组件的自定义类。
<vue-draggable-resizable class-name-dragging="my-dragging-class">
用于在调整大小时设置可拖动的可调整大小组件的自定义类。
<vue-draggable-resizable class-name-resizing="my-resizing-class">
用于设置活动时可拖动可调整大小组件的自定义类。
<vue-draggable-resizable class-name-active="my-active-class">
用于设置每个句柄元素的自定义公共类。这样，您可以使用选择器<your class>-<handle code>，分别设置每个句柄的样式，其中handle code标识由handle prop提供的一个句柄。
<vue-draggable-resizable class-name-handle="my-handle-class"></vue-draggable-resizable>
当CSS 3缩放变换应用于父元素之一时，“缩放”属性控制缩放属性。如果未提供，则默认值为1。
<vue-draggable-resizable :scale="[0.5, 0.4]">
默认情况下，组件会将样式声明“用户选择：无”添加到自身，以防止在拖动过程中选择文本。您可以通过将此道具设置为false来禁用此行为
<vue-draggable-resizable :disable-user-select="false">
默认情况下，浏览器的本机拖放功能（通常用于图像和某些其他元素）被禁用，因为它可能与组件提供的拖放功能冲突。如果出于任何原因需要恢复此功能，可以将此道具设置为true。
<vue-draggable-resizable :enable-native-drag="true">
确定零部件是否应处于活动状态。道具对更改做出反应，也可以与syncmodifier一起使用，以保持状态与父级同步。您可以与preventDeactivation道具一起使用，以便从组件外部完全控制活动行为。
<vue-draggable-resizable :active="true">
确定当用户在组件外部单击/轻触时是否应停用该组件。
<vue-draggable-resizable :prevent-deactivation="true">
定义组件是否应可拖动。
<vue-draggable-resizable :draggable="false">
定义组件是否可以调整大小。
<vue-draggable-resizable :resizable="false">
定义元素的初始宽度。它还支持自动，但当您开始调整大小时，该值将返回到一个数字。
<vue-draggable-resizable :w="200">
定义图元的初始高度。它还支持自动，但当您开始调整大小时，该值将返回到一个数字。
<vue-draggable-resizable :h="200">
定义元素的最小宽度。
<vue-draggable-resizable :min-width="50">
<vue-draggable-resizable :min-height="50">
<vue-draggable-resizable :max-width="400">
<vue-draggable-resizable :max-height="50">
定义元素的初始x位置。
<vue-draggable-resizable :x="0">
<vue-draggable-resizable :y="0">
定义元素的zIndex。
<vue-draggable-resizable :z="999">
定义句柄数组以限制元素的大小调整：
<vue-draggable-resizable :handles="['tm','bm','ml','mr']">
定义元素可拖动的轴。可用值为x、y或both。
<vue-draggable-resizable axis="x">
定义捕捉图元的栅格。
<vue-draggable-resizable :grid="[1,1]">
将零部件的移动和尺寸限制到父零部件。
<vue-draggable-resizable :parent="true">
定义应用于拖动组件的选择器。
<vue-draggable-resizable drag-handle=".drag">
定义应用于防止拖动初始化的选择器。
<vue-draggable-resizable drag-cancel=".drag">
lockAspectRatio属性用于锁定纵横比。此属性与网格不兼容，因此请确保一次只使用一个属性。
<vue-draggable-resizable :lock-aspect-ratio="true">
开始拖动时调用（单击或触摸元素）。如果任何处理程序返回false，则操作将取消。可以使用此函数防止事件冒泡。
<vue-draggable-resizable :onDragStart="onDragStartCallback">
在拖动元素之前调用。该函数接收x和y的下一个值。如果任何处理程序返回false，则操作将取消。
<vue-draggable-resizable :onDrag="onDragCallback">
开始调整大小时调用（单击或触摸句柄）。如果任何处理程序返回false，则操作将取消。
<vue-draggable-resizable :onResizeStart="onResizeStartCallback">
在调整元素大小之前调用。该函数接收句柄和下一个x、y、宽度和高度值。如果任何处理程序返回false，则操作将取消。
<vue-draggable-resizable :onResize="onResizeCallback">
每当单击组件时调用，以显示句柄。
<vue-draggable-resizable @activated="onActivated">
每当用户单击组件外部的任何位置以停用组件时调用。
<vue-draggable-resizable @deactivated="onDeactivated">
每当调整组件的大小时调用。
<vue-draggable-resizable @resizing="onResizing">
每当组件停止调整大小时调用。
<vue-draggable-resizable @resizestop="onResizstop">
每当拖动组件时调用。
<vue-draggable-resizable @dragging="onDragging">
每当组件停止拖动时调用。
<vue-draggable-resizable @dragstop="onDragstop">