基于vue和interact的dragresize组件

写在前面

由于业务的需求，之前找了https://github.com/mauricius/vue-draggable-resizable 但在使用过程中出现双击后会缩小到预设的最小宽度，而且在拖拽体验上不流畅

本人是菜鸟，写这个组件也是今天工作中解决的，顺便写的组件，由于个人水平和时间的原因肯定还有很多不足，请轻喷（给新人机会）

vuedrag

基于interact的vue拖拽组件

github地址

https://github.com/xuxiaozhou/vuedrag

特点

• 用interact结合vue的写法
• 可以对其进行扩展

用法

// 可以拷贝src中的vuedrag.vue到您的项目中
import vuedrag from 'vuedrag.vue'

// 注册组件
components:{
	vuedrag
}

// 正式使用
<vuedrag :items='items'
	 ref="vuedrag"
	 @del="del" 
	 @draging="draging" 
	 @resize="resize"></vuedrag>	
复制代码

参数解释

items

数据源

** 格式 **

[
	{
		width:100, //宽度
		height:30,
		left:10,	// 距离左边
		top:20,		// 距离上边
		minw:80,	// 最小宽度
		minh:30,	// 最小高度
		content:'内容',	//内容
	}
]
复制代码

事件说明

del(index)

冒泡删除

** 参数 **

index 数组中的第几个

draging(index,changeleft,changetop)

拖拽

** 参数 **

• index 数组中第几个
• changeleft 在left方向改变多少
• changetop 在top方向改变多少

** 用法 **

draging(index,changeleft,changetop){
	let oldL=this.items[index].left
	let oldT=this.items[index].top
	this.items[index].left=oldL+changeleft
	this.items[index].top=oldT+changetop
}
复制代码

resize(index,width,height)

调整大小

参数

• index 数组中第几个
• width 改变后的width
• height 改变后的height

用法

resize(index,width,height){
	this.items[index].width=width
	this.items[index].height=height
},
复制代码

流出来的口子

initDrag()

初始化drag组件

** 使用方法 **

this.$refs.vuedrag.initDrag()
复制代码

注意⚠️

• 可能在删除时会出现紊乱（可以props多个变量进行状态重置）