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>

importVueDragResizefrom'vue-drag-resize';

exportdefault{

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 -Topleft

tm -Topmiddle

tr-Topright

mr - Middleright

br-Bottomright

bm -Bottommiddle

bl -Bottomleft

ml - Middleleft

复制代码

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 的设计问题,在元素内部只能触发本元素,如果是有表单元素,只能被动的触发;解决:

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定制化平台。一步一步总可以实现的,加油鸭?

转载于:https://juejin.im/post/5beb9423e51d4577f96e8d24

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,468评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,620评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,427评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,160评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,197评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,334评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,775评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,444评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,628评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,459评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,508评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,210评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,767评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,850评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,076评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,627评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,196评论 2 341

推荐阅读更多精彩内容