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

　　

这篇文章将为大家详细讲解有关vue中draggable resizable如何实现可拖拽缩放的组件功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

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

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

新增特征

  • 冲突检测

  • 吸附对齐

  • 默认样式优化


功能预览

vue中draggable resizable如何实现可拖拽缩放的组件功能

项目地址

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 得到& # 39;vue # 39;
　　import  vdr 得到& # 39;vue-draggable-resizable-gorkys& # 39;//,导入默认样式
　　import  & # 39; vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css& # 39;
　　Vue.component(& # 39;论述# 39;,,vdr)

<强>局部注册组件

& lt; template> 　　,& lt; div 比; 　　& lt;才能vdr : w=?00“,: h=?00“, v:拖动=皁nDrag", v:调整=皁nResize",:父母=皌rue"比; 　　,,& lt; p>你好!,我# 39;m  a  flexible 组件只;你还要drag  me  around 以及你还要resize 我。你们;br> 　　,,,X: {{, x }},/, Y:, {{, y }},安康;宽度:,{{,width }},/,高度:,{{,height }} & lt;/p> 　　& lt;才能/vdr> 　　& lt; vdr才能 　　,,:w=?00”; 　　,,:h=?00”; 　　,,:父母=皌rue" 　　,,:debug=癴alse" 　　,,:min-width=?00”; 　　,,:最小高度=?00”; 　　,,:isConflictCheck=皌rue" 　　,,:提前=皌rue" 　　,,:snapTolerance=?0”; 　　祝辞才能; 　　& lt;才能/vdr> 　　,& lt;/div> 　　& lt;/template> 　　 　　& lt; script> 　　import  vdr 得到& # 39;vue-draggable-resizable-gorkys& # 39; 　　import  & # 39; vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css& # 39; 　　export  default  { 　　,组件:{vdr}, 　　,数据:function  (), { 　　return {才能 　　,,,宽度:0, 　　,,,身高:0, 　　,,,x: 0, 　　,,y: 0 　　,,} 　　}, 　　,方法:{ 　　onResize才能:function  (x, y),宽度,高度),{ 　　,,this.x =, x 　　,,this.y =y 　　,,this.width =,宽度 　　,,this.height =,高度 　　,,}, 　　,,onDrag: function  (x, y), { 　　,,this.x =, x 　　,,this.y =y 　　,,} 　　,} 　　} 　　& lt;/script> 为什么要使用Vue

Vue是一款友好的,多用途且高性能的JavaScript框架,使用Vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用Vue。

关于“Vue中拖拽可调整大小的如何实现可拖拽缩放的组件功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。

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