關於Vue 自定義指令實現元素拖動的詳細代碼
昨天在做的一個功能時,同時彈出多個框展示多個表格數據。
這些彈出框可以自由拖動。單獨的拖動好實現,給元素綁定 mousedowm 事件。
這裡就想到瞭 Vue 裡面自定義指令來實現。
一、自定義指令
在使用自定義指令之前,先對自定義指令有一定的瞭解。從以下幾個方面著手:
1、自定義指令定義范圍
全局註冊和組件內註冊(註冊的范圍根據實際業務需求來)
// 註冊一個全局指令,可以在任何組件使用 Vue.directive('focus',{ // 當被綁定的元素插入 DOM 時 inserted: function(el){ // 聚焦元素 el.focus() } }) // 在組件內註冊,隻能當前組件使用 directives:{ focus:{ inserted: function(el){ el.focus() } } } // 使用 <input v-focus>
2、鉤子函數
對於一個指令有下面一些鉤子函數可以選擇:
- bind:隻調用一次,指令第一次綁定到元素時調用
- inserted:被綁定元素插入父節點時調用
- update:所在組件的 VNode 更新時調用,但是可能發生在其子 VNode 更新之前
- componentUpdated:指令所在的 VNode 及其子 VNode 全部更新後調用
- unbind:隻調用一次,指令與元素解綁時調用
3、函數參數
指令鉤子函數會被傳入以下參數:
- el:指令所綁定的元素,可以用來直接操作 DOM
- binding:一個對象,包含以下 property:
name:指令名
value:指令綁定的值
oldValue:指令綁定的前一個值
expression:字符串形式的指令表達式
arg:傳給指令的參數
modifiers:一個包含修飾符的對象
- vnode:Vue 編譯生成的虛擬節點
- oldVnode:上一個虛擬節點
二、拖動實現
拖動的實現:給目標 Element 註冊 mousedown 事件,在這個事件裡面再對 document 的 mousemove 和 mouseup 註冊。
代碼如下:
directives: { drag: { // 拖動標題欄,讓父元素改變位置,這裡所以選擇 inserte的 inserted: (el) => { const target = el.parentElement el.onmousedown = (e) => { const disX = e.pageX - target.offsetLeft const disY = e.pageY - target.offsetTop document.onmousemove = (de) => { target.style.left = de.pageX - disX + 'px' target.style.top = de.pageY - disY + 'px' } document.onmouseup = (de) => { document.onmousemove = document.onmouseup = null } } } } }
在需要的 Element 上面使用 v-drag 即可。
到此這篇關於Vue 自定義指令實現元素拖動的文章就介紹到這瞭,更多相關Vue 自定義指令元素拖動內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Vue全局自定義指令Modal拖拽的實踐
- JavaScript實現鼠標拖拽效果
- vue項目中實現el-dialog組件可拖拽效果
- Vue自定義指令directive的使用方法分享
- Vue實現可拖拽組件的方法