vue-drag-resize 可拖动缩放元素组件
1、安装
npm i -s vue-drag-resize2、使用
{{ top }} х {{ left }}
{{ width }} х {{ height }}
3、参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| isActive | 是否处于激活状态 | Boolean | false |
| isDraggable | 是否允许拖拽 | Boolean | true |
| isResizable | 是否允许缩放 | Boolean | true |
| preventActiveBehavior | 是否禁止组件行为，通过单击组件并单击组件区域外部来禁用组件的行为 | Boolean | false |
| parentW | 父级宽度，定义父元素的初始宽度，未指定则自动计算 | Number | 0 |
| parentH | 父级高度，定义父元素的初始高度，未指定则自动计算 | Number | 0 |
| parentScaleX | 父级水平比例，定义父元素初始水平比例 | Number | 1 |
| parentScaleY | 父级垂直比例，定义父元素初始垂直比例 | Number | 1 |
| parentLimitation | 是否超出父级元素，将组件更改的范围限制为其父大小，即限制操作组件不能超出父级元素 | Boolean | false |
| snapToGrid | 是否等距离移动，确定组件是否应按预定义的步骤移动和调整大小 | Boolean | false |
| gridX | X轴网格步长 | Number | 50 |
| gridY | Y轴网格步长 | Number | 50 |
| aspectRatio | 是否等比例缩放 | Boolean | false |
| x | 定位水平距离 | Number | 0 |
| y | 定位垂直距离 | Number | 0 |
| z | 定位层次 | Number | auto |
| w | 组件宽度，该值可以是数字 >= 0 或字符串"auto"，如果设置为"auto"，则初始高度值将等于组件中内容的高度 | Number、 String | 200 |
| h | 组件高度，该值可以是数字 >= 0 或字符串"auto"，如果设置为"auto"，则初始高度值将等于组件中内容的高度 | Number、 String | 200 |
| minw | 最小宽度，不能设置为0 | Number | 50 |
| minh | 最小高度，不能设置为0 | Number | 50 |
| sticks | 定义元素缩放的节点 | Array | [‘tl’, ‘tm’, ‘tr’, ‘mr’, ‘br’, ‘bm’, ‘bl’, ‘ml’] |
| stickSize | 定义节点的大小 | Number | 8 |
| axis | 允许拖拽的方向 | String | x、y、both、none，默认both |
| dragHandle | 定义应该用于拖动组件的选择器 | String | 示例：dragHandle=".drag" |
| dragCancel | 定义应该用阻止拖动初始化的选择器 | String | 示例：dragHandle=".drag" |
| contentClass | 定义一个类，该类应用于 div | String | 示例：contentClass="xxx" |
4、事件
| 名称 | 说明 | 回调参数 |
|---|---|---|
| clicked | 组件点击事件 | |
| activated | 组件激活事件 | |
| deactivated | 组件取消激活事件 | |
| resizing | 缩放时事件 | { left: Number, top: Number, width: Number, height: Number } |
| resizestop | 缩放结束时事件 | 同上 |
| dragging | 拖拽时事件 | 同上 |
| dragstop | 拖拽结束时事件 | 同上 |
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！