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。