vue指令實現拖動的高階寫法

2022-07-02 15:00:17 字數 1057 閱讀 7814

不熟悉vue自定義指令看這裡: 

vue.directives: ;

//這裡是滑鼠超出基於盒子範圍之後再鬆開,會監聽不到

document.onmouseup = e =>;};}

} }

這裡介紹一種比較方美觀,邏輯清晰的寫法,**如下:

vue.directive('drag', 

//bind 改變函式內部 this 指向,讓 this 指向 el

el.handlemousemove, el.handlemousedown 這三個可以是其他的全域性變數

el.handlemouseup =handlemouseup.bind(el)

el.handlemousemove =handlemousemove.bind(el)

el.handlemousedown =handlemousedown.bind(el)

el.addeventlistener('mousedown', el.handlemousedown)

document.body.addeventlistener('mouseup', el.handlemouseup)

document.body.addeventlistener('mousemove', el.handlemousemove)

},unbind (el)

});

const handlemousedown = function(e) 

this.readytomove = true

this.mousedownpoint.x =e.screenx

this.mousedownpoint.y =e.screeny

}const handlemousemove = function(e)

const handlemouseup = function(e)

這種寫法主要利用了bind的特性,回乙個新的函式,並且這個函式的 this 已經被改成我們想要的 this, 推薦這種寫法。

vue 高階系列之指令

vue裡面有一些預設的指令,如v show,v if,v model 除了這些之外,我們還可以自定義指令來對純 dom 元素進行底層操。因為vue裡面沒有提供其他的操作dom的api,所以對dom操作的時候,可以選擇用指令的形式,特別是在v for資料迴圈的時候需要對dom進行一些操作時,用指令可以...

VUE 實現網頁中元素的拖動

實現頁面中的元素拖動。鏈結位址 div1 我可以被拖動 div2 來拖我呀zhi div3 我隨便你拖 div4 我可以隨視窗滑動,把我拖到最下面,然後滾動網dao頁看看 www.longbill.cn 引數說明 drag obj scroll obj 物件的id或物件本身 scroll 可選 物件...

Vue基礎高階 之 自定義指令

除了內建指令,vue也允許使用者自定義指令 註冊指令 通過全域性api vue.directive可以註冊自定義指令 自定義指令的鉤子函式 bind inserted update componentupdated unbind 自定義指令的使用 在自定指令的名稱前加 上 v 自定義指令的詳細介紹 ...