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

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

新增特征

冲突检测

吸附对齐

默认样式优化

功能预览

项目地址

github.com/gorkys/vue-…

如果喜欢该项目，欢迎 Star

新增Props

isConflictCheck

Type: Boolean

Required: false

Default: false

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

snap

Type: Boolean

Required: false

Default: false

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

snapTolerance

Type: Number

Required: false

Default: 5

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

其它属性请参考 vue-draggable-resizable 官方文档

安装使用

$ 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

}

}

}

总结

以上所述是小编给大家介绍的vue draggable resizable 实现可拖拽缩放的组件功能 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

本文标题: vue draggable resizable 实现可拖拽缩放的组件功能

本文地址: http://www.cppcns.com/wangluo/javascript/265400.html