VueDRR
一个可以拖动、拉伸、旋转的Vue2 组件,基于 vue-draggable-resizable,并优化了部分细节,增加了旋转
中文 | ENGLISH
目录
Demo
安装和基本用法
$ npm install --save vue-drr
注册组件
Vue
简单例子
<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
旋转角度
组件旋转停止时触发