vue拖拽缩放组件（vue-drag-resize）

vue-drag-resize是一个支持拖拽与缩放的vue插件，支持vue 1.x与2.x，使用方便，上手便利。

特征

1. 轻量级，无依赖性
2. 所有的操作都是可联动的
3. 支持触摸事件
4. 定义元素可拖拽，或者可缩放，或者二者兼有
5. 提供用于调整大小的操作点与操作框
6. 可以按照比例缩放或者不按照比例缩放元素
7. 可限制拖拽的最大与最小值、拖拽的范围是否超出其父元素
8. 可限制拖动的方向为垂直或水平轴

gitHib地址：
https://github.com/kirillmurashov/vue-drag-resize

用法

npm i -s vue-drag-resize

一、注册为全局组件，在vue项目中注册（在任何组件中使用的时候，不用引入直接）：

import Vue from 'vue' import VueDragResize from 'vue-drag-resize'；
Vue.component('vue-drag-resize', VueDragResize);

二、在需要的组件中引入

<template>
      <div id="app">
      <vue-drag-resize>vue-drag-resize>
template>

<script>
import VueDragResize from 'vue-drag-resize';
export default {
     name: 'app',
     components: {
          VueDragResize
	},
}
script>

属性

属性	说明	类型	是否必须	默认值	备注
isActive	激活状态	Boolean	否	false	处于激活状态的组件才能进行拖拽与缩放等操作，状态呈现激活状态
isDraggable	允许拖拽	Boolean	否	true
isResizable	允许缩放	Boolean	否	true
aspectRatio	允许等比例缩放	Boolean	否	false	设置为true，则会按照元素的元比例缩放。坑：定义了这个属性，发现重新设置宽高的时候出现了异常（新值比例不同于旧值），需要在重设宽高的时候把aspectRatio设置为false，再将其设置回去，才能保证新值的等比例
w	宽度	Number	否	200
h	高度	Number	否	200
minw	最小宽度	Number	否	50	注意不能设置为0，因为这个组件里面属性要求大于0
minh	最小高度	Number	否	50	注意不能设置为0，因为这个组件里面属性要求大于0
x	定位left	Number	否	0
y	定位top	Number	否	0
z	层级	Number	否	auto	注意在元素激活的时候，z会被设置为最高的，所以在管理z的时候要注意
sticks	元素缩放的节点定义	Array	否	[‘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
preventActiveBehavior	单击组件外区域来禁止组件行为	Boolean	否	false	设置这个属性true，就可以解决在其他区域操作返回到组件区域的时候，不需要再次点击就激活组件
parentLimitation	允许超出父级元素	Boolean	否	false	设置为true，则限制操作组件不能超出父级元素
parentW	父级宽度	Number	否	0	该值限制了元素可以拖动的水平最大宽度，前提是parentLimitation=true
parentH	父级高度	Number	否	0	该值限制了元素可以拖动的水平最大高度，前提是parentLimitation=true
parentScaleX	定义初始水平缩放比例	Number	否	1
parentScaleY	定义初始垂直缩放比例	Number	否	1
axis	允许拖拽的方向	String	否	both	取值可以为x、 y、 both、none
dragHandle	定义拖拽时的classname	String	否	无
dragCancel	定义取消拖拽时的classname	String	否	无

方法

例子：

方法	说明	参数类型	参数例子
clicked	组件点击事件	组件实例
activated	点击组件事件	无
resizing	缩放时事件	object	{ left: Number, //the X position of the component top: Number, //the Y position of the component width: Number, //the width of the component height: Number //the height of the component }
resizestop	缩放结束	object	同resizing一样
dragging	拖拽时事件	object	同resizing一样
dragstop	拖拽结束事件	object	同resizing一样

使用问题

怎么修改使点击组件外面后，不需要点击组件才能进行？

:preventActiveBehavior="true" 设置这个属性，禁用点击组件外事件

在拖拽元素里面添加input等类似的表单性元素，无法正常点击操作，特别是focus无法做到，click也是经常失效

原因：vue-drag-resize 的设计问题，在元素内部只能触发本元素，如果是有表单元素，只能被动的触发

解决方案：

<vue-drag-resize @activated="activateEv(index)" />
activateEv(index) {
	console.log('activateEv' + index);
    this.$refs['drag-input'].focus();
}

参考：
https://github.com/sidratariq/vue-drag-resize
https://juejin.cn/post/6844903713430061063