vue-drag-resize VUE可缩放组件

标签:false   als   tail   表单元素   ddl   head   component   最大   用法   

vue-drag-resize是一个支持拖拽与缩放的vue插件

特征

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

用法:$ npm i -s vue-drag-resize 然后全局引入或者按需引入

属性
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" 设置这个属性,禁用点击组件外事件

 

from:https://blog.csdn.net/weixin_33957648/article/details/91423751?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control

vue-drag-resize VUE可缩放组件

标签:false   als   tail   表单元素   ddl   head   component   最大   用法   

原文地址:https://www.cnblogs.com/hjcby/p/14201776.html

版权声明:完美者 发表于 2021-01-01 12:42:50。
转载请注明:vue-drag-resize VUE可缩放组件 | 完美导航

暂无评论

暂无评论...