一个可以拖动、拉伸、旋转的Vue2 组件,基于 vue-draggable-resizable，并优化了部分细节，增加了旋转

中文 | ENGLISH

目录

• Demo
• 安装和基本用法
  • 属性
  • 方法
• License

Demo

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 旋转角度

组件旋转停止时触发

License

MIT license