關於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!

推薦閱讀: