如何编辑微信小程序_vue draggable resizable 完成可拖

阅读  ·  发布日期 2021-01-07 12:32  ·  admin
vue draggable resizable 实现可拖拽缩放的组件功能       这篇文章主要介绍了vue draggable resizable 实现可拖拽缩放的组件功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

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

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

新增特征

冲突检测 吸附对齐 默认样式优化

功能预览

项目地址

如果喜欢该项目,欢迎 Star

新增Pro凡科抠图

isConflictCheck

Type: Boolean

Required: false

Default: false

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

 vue-draggable-resizable :is-conflict-check="true" 

snap

Type: Boolean

Required: false

Default: false

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

 vue-draggable-resizable :snap="true" 

snapTolerance

Type: Number

Required: false

Default: 5

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

 vue-draggable-resizable :snap="true" :snap-tolerance="20" 

其它属性请参考 官方文档

安装使用

$ 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'
ponent('vdr', vdr)

局部注册组件

 template 
 div 
 vdr :w="100" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true" 
 p Hello! I'm ponent. You can drag me around and you can resize me. br 
 X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }} /p 
 /vdr 
 :w="200"
 :h="200"
 :parent="true"
 :debug="false"
 :min-width="200"
 :min-height="200"
 :isConflictCheck="true"
 :snap="true"
 :snapTolerance="20"
 /vdr 
 /div 
 /template 
 script 
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
 /script 

总结

以上所述是小编给大家介绍的vue draggable resizable 实现可拖拽缩放的组件功能 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!