基於vue和interact的dragresize元件

答案xxz發表於2018-02-07
Vue元件

寫在前面

由於業務的需求，之前找了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多個變數進行狀態重置）

相關文章