0.1.8 • Published 3 years ago
ray-drag-resize-v2 v0.1.8
ray-drag-resize-v2
安装
npm install ray-drag-resize-v2
引入
import dragResizeV2 from 'ray-drag-resize-v2'
import 'ray-drag-resize-v2/lib/drag-resize-v2.css'
Vue.use(dragResizeV2)
使用
<drag-resize-v2 @onDragResize="handleData">
content
</drag-resize-v2>
methods:{
handleData(data){
console.log(data)
}
}
props
属性 | 描述 | default | type |
---|---|---|---|
activeColor | 选中的颜色 | rgba(119, 221, 178, 0.3) | string |
nodeKey | 组件的key | uuid() | number/string |
minh | 最小高度 | 100 | number |
minw | 最小高度 | 100 | number |
initTop | 初始Y轴坐标 | 10 | number |
initLeft | 初始X轴坐标 | 10 | number |
initHeight | 初始高度 | 200 | number |
initWidth | 初始宽度 | 200 | number |
disabled | 禁止拖拽和放大缩小 | false | boolean |
dragDisabled | 禁止拖拽 | false | boolean |
resizeDisabled | 禁止放大缩小 | false | boolean |
horn | 通过角进行拖拽 | true | boolean |
edge | 通过边进行拖拽 | true | boolean |
events
函数名 | 描述 |
---|---|
onDragResize | 拖拽或设置大小后抛出的事件 包含当前组件的位置及大小信息及nodeKey |
说明
此组件为vue2版本的组件,如需要vue3版本的安装 ray-drag-resize-v3(更新较慢)。 如有改进建议github提issue。