vue-drag-resize 可拖动缩放元素的Vue组件
特征
- 轻量级、无依赖性
- 所有道具都是反应式的
- 支持触摸事件
- 将元素捕捉到自定义网格
- 使用可拖动、可调整大小或同时使用两者
- 定义用于调整大小的棒
- 保存可调整大小的组件的纵横比
- 限制大小和移动到父元素
- 将拖动限制为垂直或水平轴
安装与基本用法
$ npm i -s vue-drag-resize
注册组件
import Vue from 'vue'
import VueDragResize from 'vue-drag-resize'
Vue.component('vue-drag-resize', VueDragResize)
使用组件
Hello World!
{{ top }} х {{ left }}
{{ width }} х {{ height }}
属性
isActive 是否处于激活状态
类型： Boolean
必需: false
默认值： false
确定组件是否应处于活动状态。
preventActiveBehavior 是否禁止组件行为
类型： Boolean
必需: false
默认值： false
通过单击组件并单击组件区域外部来禁用组件的行为（isActive：true / false）。
如果启用了prop，则组件仅面向指定的
parentW 父级宽度
类型： Number
必需: false
默认值： 0
定义父元素的初始宽度。 如果未指定，则自动计算。
使用此参数，您可以设置组件的边界区域，并在实时调整大小时使用它。
parentH 父级高度
类型： Number
必需: false
默认值： 0
定义父元素的初始高度。 如果未指定，则自动计算。
使用此参数，您可以设置组件的边界区域，并在实时调整大小时使用它。
parentScaleX 父级水平比例
类型： Number
必需: false
默认值： 1
定义初始水平比例或父元素。父级的transform:scale（）css定义中的值相同。
拖动/调整大小和杆的大小将使用该值计算。
parentScaleY 父级垂直比例
类型： Number
必需: false
默认值： 1
定义初始垂直比例或父元素。父级的transform:scale（）css定义中的值相同。
拖动/调整大小和杆的大小将使用该值计算。
isDraggable 是否允许拖拽
类型： Boolean
必需: false
默认值： true
确定组件是否应可拖动。
isResizable 是否允许缩放
类型： Boolean
必需: false
默认值： true
确定组件是否应可缩放。
parentLimitation 是否超出父级元素
类型： Boolean
必需: false
默认值： false
将组件更改的范围限制为其父大小，即限制操作组件不能超出父级元素。
snapToGrid 是否等距离移动
类型： Boolean
必需: false
默认值： false
确定组件是否应按预定义的步骤移动和调整大小。
gridX X轴网格步长
类型： Number
必需: false
默认值： 50
定义水平轴的网格步长。组件的顶部和底部将捕捉到此步骤。
gridY Y轴网格步长
类型： Number
必需: false
默认值： 50
定义垂直轴的网格步长。组件的左侧和右侧将捕捉到此步骤。
aspectRatio 是否等比例缩放
类型： Boolean
必需: false
默认值： false
确定组件是否应保持其比例。
坑：定义了这个属性，发现重新设置宽高的时候出现了异常（新值比例不同于旧值），需要在重设宽高的时候把aspectRatio设置为false，再将其设置回去，才能保证新值的等比例
w 组件宽度
类型： Number || String
必需: false
默认值： 200
定义元件的初始高度。
该值可以是数字 >= 0 或字符串"auto"。如果设置为"auto"，则初始高度值将等于组件中内容的高度。
h 组件高度
类型： Number || String
必需: false
默认值： 200
定义元件的初始高度。
该值可以是数字 >= 0 或字符串"auto"。如果设置为"auto"，则初始高度值将等于组件中内容的高度。
minw 最小宽度
类型： Number
必需: false
默认值： 50
定义元件的最小宽度。
注意，不能设置为0，因为这个组件里面属性要求大于0。
minh 最小高度
类型： Number
必需: false
默认值： 50
定义组件的最小高度。
注意，不能设置为0，因为这个组件里面属性要求大于0。
x 定位水平距离
类型： Number
必需: false
默认值： 0
定义组件的初始x轴位置。
y 定位垂直距离
类型： Number
必需: false
默认值： 0
定义组件的初始y轴位置。
z 定位层次
类型： Number
必需: false
默认值： auto
定义组件的层次。
注意在元素激活的时候，z会被设置为最高的。
sticks 定义元素缩放的节点
类型： Array
必需: false
默认值： [‘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
stickSize 定义节点的大小
类型： Number
必需: false
默认值： 8
定义节点的大小
axis 允许拖拽的方向
类型： String
必需: false
默认值： both
定义元素可拖动的轴(方向)。 可用值为x、y、both、none。
dragHandle
类型： String
必需: false
定义应该用于拖动组件的选择器。
dragCancel
类型： String
必需: false
定义应该用阻止拖动初始化的选择器。
contentClass
类型： String
必需: false
定义一个类，该类应用于 div。
事件
clicked 组件点击事件
必需: false
参数: event handler
单击组件时调用。
activated 组件点击事件
参数: 无
单击组件时调用，以显示节点。
deactivated 点击组件外事件
参数: 无
当单击组件外部的任何位置时调用，以便将其停用。
resizing 缩放时事件
必需: false
参数: 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 缩放结束时
必需: false
参数: 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
}
组件停止调整大小时调用。
dragging 拖拽时事件
必需: false
参数: 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
}
当拖动组件时调用。
dragstop 拖拽结束时事件
必需: false
参数: 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
}
当组件停止拖动时调用。