vue-drag-resize 全解，vue拖拽缩放组件

vue-drag-resize是一个支持拖拽与缩放的vue插件，支持vue 1.x与2.x，使用方便，上手便利，具备如下的几个特征：

特征

• 轻量级，无依赖性
• 全部的操做都是可联动的
• 支持触摸事件
• 定义元素可拖拽，或者可缩放，或者两者兼有
• 提供用于调整大小的操做点与操做框
• 能够按照比例缩放或者不按照比例缩放元素
• 可限制拖拽的最大与最小值、拖拽的范围是否超出其父元素
• 可限制拖动的方向为垂直或水平轴

gitHib地址： github.com/kirillmuras…

用法

$ npm i -s vue-drag-resize

• 注册为全局组件，在vue项目中注册：

  import Vue from 'vue' import VueDragResize from 'vue-drag-resize' Vue.component('vue-drag-resize', VueDragResize) 在任何组件中使用的时候，不用引入直接；

  <vue-drag-resize：isActive = 'true'>

• 在须要的组件中引入：

  <template>
        <div id="app">
        <vue-drag-resize></vue-drag-resize>
    </template>
    import VueDragResize from 'vue-drag-resize';
    export default {
        name: 'app',
        components: {
            VueDragResize
        },
    }
  复制代码

属性

isActive 是否激活状态

Type: Boolean || Required: false || Default: false

处于激活状态的组件才能进行拖拽与缩放等操做，状态呈现激活状态

isDraggable 是否容许拖拽

Type: Boolean || Required: false || Default: true

isResizable 是否容许缩放

Type: Boolean || Required: false || Default: true

aspectRatio 是否等比例缩放

Type: Boolean || Required: false || Default: false

设置为true，则会按照元素的元比例缩放。坑：定义了这个属性，发现从新设置宽高的时候出现了异常（新值比例不一样于旧值），须要在重设宽高的时候把aspectRatio设置为false，再将其设置回去，才能保证新值的等比例

w 组件宽度

Type: Number || Required: false || Default: 200

h 组件高度

Type: Number || Required: false || Default: 200

minw 最小宽度

Type: Number || Required: false || Default: 50

注意，不能设置为0，由于这个组件里面属性要求大于0

minh 最小高度

Type: Number || Required: false || Default: 50

注意，不能设置为0，由于这个组件里面属性要求大于0

x 定位left

Type: Number || Required: false || Default: 0

y 定位top

Type: Number || Required: false || Default: 0

z 层级

Type: Number || Required: false || Default: auto

注意在元素激活的时候，z会被设置为最高的，因此在管理z的时候要注意

sticks 元素缩放的节点定义

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
复制代码

preventActiveBehavior 单击组件外区域来禁止组件行为

Type: Boolean || Required: false || Default: false

设置这个属性true，就能够解决在其余区域操做返回到组件区域的时候，不须要再次点击就激活组件

parentLimitation 是否超出父级元素

Type: Boolean || Required: false || Default: false

设置为true，则限制操做组件不能超出父级元素

parentW 父级宽度

Type: Number || Required: false || Default: 0

该值限制了元素能够拖动的水平最大宽度，前提是parentLimitation=true

parentH 父级高度

Type: Number || Required: false || Default: 0

该值限制了元素能够拖动的水平最大高度，前提是parentLimitation=true

parentScaleX

Type: Number || Required: false || Default: 1

parentScaleY

Type: Number || Required: false || Default: 1

axis 容许拖拽的方向，

Type: String || Required: false || Default: both

取值能够为x、 y、 both、none

dragHandle 定义拖拽时的classname

Type: String || Required: false

dragCancel 定义取消拖拽时的classname

Type: String || Required: false

事件

clicked 组件点击事件

Required: false || Parameters: 组件实例

activated 点击组件外事件

Required: false || Parameters: 无

resizing 缩放时事件

Required: false || Parameters: 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 缩放结束

Required: false || Parameters: object

object 同resizing的object

dragging 拖拽时事件

Required: false || Parameters: object

object 同resizing的object

dragstop 拖拽结束事件

Required: false || Parameters: object

object 同resizing的object

issues

• 在拖拽元素里面添加input等相似的表单性元素，没法正常点击操做，特别是focus没法作到，click也是常常失效[摊手]

vue-drag-resize 的设计问题，在元素内部只能触发本元素，若是是有表单元素，只能被动的触发；解决：

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

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

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

更新计划

• 设置了组件的minh与minw,使用过程后台一直报警告

minh跟minw注意临界值。默认是50，查看源码发现必需要大于0 ，不能为0，这就是大部分开发人员后台报警告的缘由。固然，若是想要设置为0，能够从新定义属性校验规则

• 多个拖拽元素，以前如何作到互斥？看github上的例子是互斥的，实际用起来发现常常性的没法互斥[摊手]

最佳的解决方案是使用数据去管理这些互斥的元素，能够在父级设置数据管理，或者引入vuex进行数据管理。关键点在点击，拖拽，失焦的时候，作到对数据的精确管理

• 如何管理多个拖拽元素之间的zIndex？

这是一定会遇到而且没法逃避的一个问题，操做上须要保持当前激活的组件是最上层，可是在整体上，又要确保其图层管理的初始。维护zIndex，而且注意在删除与置换层级的时候对应的数据修改。若是被激活，就设定为一个最大的值，失去激活状态，要恢复到初始值。

这个组件使用简单，清楚明了，我本身在用的时候，就是上手很快，可是要如何良好的应用它，以及处理一些异常的状况下，仍是有不少的坑。基于这个组件，我实现了一个编辑器的平台，后续会更新这个组件更实用的一些应用实例，以及如何与vuex结合，实现一个基础的h5编辑器平台。再结合一些设置与多媒体的处理，便可以实现诸如易企秀、Maka等这种h5定制化平台。一步一步总能够实现的，加油鸭🦆