// 注冊(cè)一個(gè)全局指令，可以在任何組件使用
Vue.directive('focus',{
    // 當(dāng)被綁定的元素插入 DOM 時(shí)
    inserted: function(el){
        // 聚焦元素
        el.focus()
    }
})

// 在組件內(nèi)注冊(cè)，只能當(dāng)前組件使用
directives:{
    focus:{
        inserted: function(el){
            el.focus()
        }
    }
}

// 使用
<input v-focus>

2、鉤子函數(shù)

對(duì)于一個(gè)指令有下面一些鉤子函數(shù)可以選擇：

bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用
inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用
update：所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其子 VNode 更新之前
componentUpdated：指令所在的 VNode 及其子 VNode 全部更新后調(diào)用
unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用

3、函數(shù)參數(shù)

指令鉤子函數(shù)會(huì)被傳入以下參數(shù)：

el：指令所綁定的元素，可以用來(lái)直接操作 DOM
binding：一個(gè)對(duì)象，包含以下 property：

name：指令名

value：指令綁定的值

oldValue：指令綁定的前一個(gè)值

expression：字符串形式的指令表達(dá)式

arg：傳給指令的參數(shù)

modifiers：一個(gè)包含修飾符的對(duì)象

vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)
oldVnode：上一個(gè)虛擬節(jié)點(diǎn)

二、拖動(dòng)實(shí)現(xiàn)

拖動(dòng)的實(shí)現(xiàn)：給目標(biāo) Element 注冊(cè) mousedown 事件，在這個(gè)事件里面再對(duì) document 的 mousemove 和 mouseup 注冊(cè)。

代碼如下：

directives: {
    drag: {
      // 拖動(dòng)標(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 自定義指令實(shí)現(xiàn)元素拖動(dòng)的文章就介紹到這了,更多相關(guān)Vue 自定義指令元素拖動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: