不熟悉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 自定義指令的詳細介紹 ...