vue-draggable-resizable-gorkys

by gorkys

Vue 用于可调整大小和可拖动元素的组件并支持冲突检测、元素吸附、元素对齐、辅助线

375 Stars 89 Forks Last release: Not found MIT License 47 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

logo

VueDraggableResizable 2

Latest Version on NPM Software License npm

新增特征✨

  • 辅助线(新)
  • 元素对齐(新)
  • 冲突检测
  • 吸附对齐
  • 默认样式优化

Q交流群:138146781

说明

说明:组件基于vue-draggable-resizable进行二次开发

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

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

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

功能预览

英文版演示地址 | 中文版演示地址

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

新增Props

handleInfo
类型:

Object

必需:
false

默认:
{
                                                size: 8,
                                                offset: -5,
                                                switch: true
                                              }

当使用

transform:scale()
进行缩放操作时,其中
switch
为是否让handle始终保持视觉效果不变,
size
为handle的大小(宽高相同),
offset
为handle的位置偏移,通常在自定义handle样式时需要设置。

scaleRatio
类型:

Number

必需:
false

默认:
1

当使用

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

详见:Issues


isConflictCheck
类型:

Boolean

必需:
false

默认:
false

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


snap
类型:

Boolean

必需:
false

默认:
false

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


snapTolerance
类型:

Number

必需:
false

默认:
5

当调用

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

新增Events

refLineParams
参数: params

返回参数是一个Object,里面包含

vLine
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)

局部注册组件

License

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.