VueDRR
一个可以拖动、拉伸、旋转的Vue2 组件,基于 vue-draggable-resizable，并优化了部分细节，增加了旋转
中文 | ENGLISH
目录
Demo
安装和基本用法
$ npm install --save vue-drr注册组件
import Vue from 'vue'
import VueDrr from 'vue-drr'
Vue.component('vue-drr', VueDrr)简单例子
<template>
<div id="app">
<div style="height: 500px; width: 500px; margin: 20px; border: 1px solid red; position: relative;">
<vue-drr
:x="x"
:y="y"
:angle="angle"
:w="width"
:h="height"
:parent="true"
@dragging="handleDragging"
@resizing="handleResizing"
@rotating="handleRotating"
>
<p>x: {{ x }}, y: {{ y }}, angle: {{ angle }}, width: {{ width }}, height: {{ height }}</p>
</vue-drr>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data: function () {
return {
width: 200,
height: 200,
x: 50,
y: 50,
angle: 30
}
},
methods: {
handleResizing: function (x, y, width, height) {
this.x = x
this.y = y
this.width = width
this.height = height
},
handleDragging: function (x, y) {
this.x = x
this.y = y
},
handleRotating: function (angle) {
this.angle = angle
}
}
}
</script>属性
active
Type: Boolean
Required: false
Default: false
定义组件选中状态，状态更新时，属性值同步变化
draggable
Type: Boolean
Required: false
Default: true
定义组件是否可以拖动
resizable
Type: Boolean
Required: false
Default: true
定义组件是否可以拉伸
rotatable
Type: Boolean
Required: false
Default: true
定义组件是否可以旋转
w
Type: Number
Required: false
Default: 200
定义元素初始宽度
h
Type: Number
Required: false
Default: 200
定义元素初始高度
minw
Type: Number
Required: false
Default: 50
定义元素最小宽度
minh
Type: Number
Required: false
Default: 50
定义元素最小高度
angle
Type: Number
Required: false
Default: 0
定义元素初始角度
x
Type: Number
Required: false
Default: 0
定义元素初始水平位置
y
Type: Number
Required: false
Default: 0
定义元素初始竖直位置
handles
Type: Array
Required: false
Default: ['n', 'e', 's', 'w', 'nw', 'ne', 'se', 'sw']
axis
Type: String
Required: false
Default: both
定义元素在水平、竖直，或者两个方向上拖动
grid
Type: Array
Required: false
Default: [1,1]
定义元素拖动网格
parent
Type: Boolean
Required: false
Default: false
限制元素的移动和维度
方法
activated
Required: false
参数: -
组件上按下鼠标触发
deactivated
Required: false
参数: -
组件外按下鼠标触发
resizing
Required: false
参数:
left水平方向位置top竖直方向位置width元素宽度height元素高度
组件拉伸时触发
resizestop
Required: false
参数:
left水平方向位置top竖直方向位置width元素宽度height元素高度
组件拉伸停止时触发
dragging
Required: false
参数:
left水平方向位置top竖直方向位置
组件拖动时触发
dragstop
Required: false
参数:
left水平方向位置top竖直方向位置
组件拖动停止时触发
rotating
Required: false
参数:
angle旋转角度
组件旋转时触发
rotatestop
Required: false
参数:
angle旋转角度
组件旋转停止时触发