關(guān)于Vue 自定義指令實現(xiàn)元素拖動的詳細(xì)代碼
昨天在做的一個功能時,同時彈出多個框展示多個表格數(shù)據(jù)。
這些彈出框可以自由拖動。單獨的拖動好實現(xiàn),給元素綁定 mousedowm 事件。
這里就想到了 Vue 里面自定義指令來實現(xiàn)。
一、自定義指令
在使用自定義指令之前,先對自定義指令有一定的了解。從以下幾個方面著手:
1、自定義指令定義范圍
全局注冊和組件內(nèi)注冊(注冊的范圍根據(jù)實際業(yè)務(wù)需求來)
// 注冊一個全局指令,可以在任何組件使用 Vue.directive('focus',{ // 當(dāng)被綁定的元素插入 DOM 時 inserted: function(el){ // 聚焦元素 el.focus() } }) // 在組件內(nèi)注冊,只能當(dāng)前組件使用 directives:{ focus:{ inserted: function(el){ el.focus() } } } // 使用 <input v-focus>
2、鉤子函數(shù)
對于一個指令有下面一些鉤子函數(shù)可以選擇:
- bind:只調(diào)用一次,指令第一次綁定到元素時調(diào)用
- inserted:被綁定元素插入父節(jié)點時調(diào)用
- update:所在組件的 VNode 更新時調(diào)用,但是可能發(fā)生在其子 VNode 更新之前
- componentUpdated:指令所在的 VNode 及其子 VNode 全部更新后調(diào)用
- unbind:只調(diào)用一次,指令與元素解綁時調(diào)用
3、函數(shù)參數(shù)
指令鉤子函數(shù)會被傳入以下參數(shù):
- el:指令所綁定的元素,可以用來直接操作 DOM
- binding:一個對象,包含以下 property:
name:指令名
value:指令綁定的值
oldValue:指令綁定的前一個值
expression:字符串形式的指令表達(dá)式
arg:傳給指令的參數(shù)
modifiers:一個包含修飾符的對象
- vnode:Vue 編譯生成的虛擬節(jié)點
- oldVnode:上一個虛擬節(jié)點
二、拖動實現(xiàn)
拖動的實現(xiàn):給目標(biāo) Element 注冊 mousedown 事件,在這個事件里面再對 document 的 mousemove 和 mouseup 注冊。
代碼如下:
directives: { drag: { // 拖動標(biāo)題欄,讓父元素改變位置,這里所以選擇 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 即可。
到此這篇關(guān)于Vue 自定義指令實現(xiàn)元素拖動的文章就介紹到這了,更多相關(guān)Vue 自定義指令元素拖動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于vue中解決v-for使用報紅并出現(xiàn)警告的問題
下面小編就為大家分享一篇基于vue中解決v-for使用報紅并出現(xiàn)警告的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03