VueDraggableResizable 2

新增特征✨

辅助线(新)

元素对齐(新)

冲突检测

吸附对齐

默认样式优化

Q交流群：138146781

说明

距离上1.7版本版本的修改已经过去快一年的时间了，原版组件在之前已经更新到了2.0版本。

虽然之前适配过旧版组件，但是因为2.0版本原作者对代码进行了重构，原来修改的代码照搬是不可能的了。

所以也就一直没有将冲突检测以及吸附对齐功能适配到2.0版本，最近正好有时间就适配一下。

功能预览

注意：英文版为官方原版，没有新增功能的演示。中文版为google翻译版本，新增功能在高级目录下可查看

新增Props

scaleRatio

类型: Number

必需: false

默认: 1

当使用transform:scale()进行缩放操作后，用来修复操作组件时鼠标指针与移动缩放位置有所偏移的情况

isConflictCheck

类型: Boolean

必需: false

默认: false

定义组件是否开启冲突检测。

snap

类型: Boolean

必需: false

默认: false

定义组件是否开启元素对齐。

snapTolerance

类型: Number

必需: false

默认: 5

当调用snap时，定义组件与元素之间的对齐距离，以像素(px)为单位。

新增Events

refLineParams

参数: params

返回参数是一个Object,里面包含vLine与hLine，具体使用参考下面代码。

import VueDraggableResizable from 'vue-draggable-resizable'

import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'

export default {

name: 'app',

components: {

VueDraggableResizable

},

data () {

return {

vLine: [],

hLine: []

}

},

methods: {

getRefLineParams (params) {

const { vLine, hLine } = params

this.vLine = vLine

this.hLine = hLine

}

}

}

其它属性

注意：英文版为官方原版，中文版为google翻译版本

安装使用

$ npm install --save vue-draggable-resizable-gorkys

全局注册组件

//main.js

import Vue from 'vue'

import vdr from 'vue-draggable-resizable-gorkys'

// 导入默认样式

import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'

Vue.component('vdr', vdr)

局部注册组件

import vdr from 'vue-draggable-resizable-gorkys'

import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'

export default {

components: {vdr},

data: function () {

return {

width: 0,

height: 0,

x: 0,

y: 0

}

},

methods: {

onResize: function (x, y, width, height) {

this.x = x

this.y = y

this.width = width

this.height = height

},

onDrag: function (x, y) {

this.x = x

this.y = y

}

}

}

License

The MIT License (MIT). Please see License File for more information.