vue 中把dome拖拽封裝成全局自定義指令

1 首先在vue中 我們把拖拽事件進行封裝(我這裏是把它取名叫common.js)

2 定義一個對象 

3 把需要用到的封裝函數寫在對象裏面

4 導出這個對象 

5 在需要用到拖拽功能的組件中進行引入

6 給需要拖拽的元素綁定事件 (我這裏是通過標題拖動父元素類似於登錄表單拖拽的形式)

7 調用對象裏面的方法 

 

到此vue中封裝拖拽功能已經全部實現了

8 這樣進行封裝還是覺得調用起來不爽,那麼需要把這個封裝成自定義指令  

dialogHeaderEl表示拖拽的元素

dragDom 表示移動的元素

在需要拖拽的dome元素上面加上v-dialogDrag就行了

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章