vue可拖动调整大小实现可拖拽缩放的组件功能

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

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

新增特征

冲突检测吸附对齐默认样式优化功能预览

项目地址

github.com/gorkys/vue-…

如果喜欢该项目，欢迎星星

新增小道具

存在冲突检查

类型：布尔值

Required: false

默认值：为假

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

vue-可拖动-可调整大小：是-冲突-检查="真"快照

类型：布尔值

Required: false

默认值：为假

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

vue-可拖动调整大小的：快照=“真”快照容差

键入：号

Required: false

默认值： 5

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

vue-可拖动-可调整大小： snap=' true ' : snap-容差='20 '其它属性请参考vue-可拖动-可调整大小官方文档

安装使用

$ npm安装-保存vue-可拖动-可调整大小高尔基斯全局注册组件

//main。jsimport从“Vue”导入Vue从“Vue-可拖动-可调整大小-gorkys”/导入VDR导入默认样式import ' vue-draggable-resizable-gorkys/dist/vuedraggableresizable。CSS ' vue。组件(' vdr '，VDR)局部注册组件

模板div style=' height: 500px宽度： 500像素；border: 1px纯红；相对位置：'VDR : w=' 100 ' :h=' 100 ' v-:拖动=' onDrag ' v-:调整大小=' onResize ' :父级=' true ' pHello！我是一个灵活的组件。你可以把我拖来拖去，还可以调整我的大小br x : { { x } }/y : { { y } }-宽度： { { width } }/高度： { { height } }/p/VDR VDR : w=' 200 ' :h=' 200 ' 33: parent=' true ' : debug=' false ' :min-width=' 200 ' height){ this。x=x这个。y=y这个。宽度=这个宽度。高度=高度}，onDrag:函数(x，y){这个。x=x这个。y=y } }/脚本总结

以上所述是小编给大家介绍的某视频剪辑软件可拖动可调整大小实现可拖拽缩放的组件功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！