// 注冊一個全局指令，可以在任何組件使用
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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: