關(guān)于Vue 自定義指令實(shí)現(xiàn)元素拖動(dòng)的詳細(xì)代碼

更新時(shí)間：2022年01月18日 11:51:48 作者：漠里

這篇文章主要介紹了Vue 自定義指令實(shí)現(xiàn)元素拖動(dòng),在使用自定義指令之前，先對(duì)自定義指令有一定的了解，主要從自定義指令定義范圍，鉤子函數(shù)方面入手，需要的朋友可以參考下

昨天在做的一個(gè)功能時(shí)，同時(shí)彈出多個(gè)框展示多個(gè)表格數(shù)據(jù)。

這些彈出框可以自由拖動(dòng)。單獨(dú)的拖動(dòng)好實(shí)現(xiàn)，給元素綁定 mousedowm 事件。

這里就想到了 Vue 里面自定義指令來(lái)實(shí)現(xiàn)。

一、自定義指令

在使用自定義指令之前，先對(duì)自定義指令有一定的了解。從以下幾個(gè)方面著手：

1、自定義指令定義范圍

全局注冊(cè)和組件內(nèi)注冊(cè)（注冊(cè)的范圍根據(jù)實(shí)際業(yè)務(wù)需求來(lái)）

// 注冊(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: