Vue.directive自定義指令的使用詳解
更新時間：2017年03月10日 10:48:21 作者：BigTable
本篇文章主要介紹了Vue.directive自定義指令的使用詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
很多教程都是在講自定義指令的概念和語法,看的相當(dāng)?shù)疤?本文不講語法和概念,只講用法.
自定義指令基本就是用來操作DOM的,雖然官方推薦數(shù)據(jù)驅(qū)動視圖,有時候還是需要自定義指令來操作DOM,指令可復(fù)用.
1. 自定義指令實現(xiàn)拖拽
HTML:
<div v-drag>我可以拖拽</div>
JS:
Vue.directive('drag',
inserted:function(el){ //inserted 鉤子函數(shù):當(dāng)元素被插入父元素時觸發(fā),可省略
let oDiv=el; //el --> 觸發(fā)的DOM元素
oDiv.onmousedown=function(e){
let l=e.clientX-oDiv.offsetLeft;
let t=e.clientY-oDiv.offsetTop;
document.onmousemove=function(e){
oDiv.style.left=e.clientX-l+'px';
oDiv.style.top=e.clientY-t+'px';
};
oDiv.onmouseup=function(){
document.onmousemove=null;
oDiv.onmouseup=null;
}
}
})
自定義指令還可以引入第三方插件,之前都是用JQuery來構(gòu)建項目.
自定義指令的好處就是不管之前是用什么寫的JQuery還好或是原生js也好都可以直接拿來封裝成自定義指令,不需要重寫
例如這個拖拽:
Drag.js:
export default function(el){
let oDiv=el;
oDiv.onmousedown=function(e){
let l=e.clientX-oDiv.offsetLeft;
let t=e.clientY-oDiv.offsetTop;
document.onmousemove=function(e){
oDiv.style.left=e.clientX-l+'px';
oDiv.style.top=e.clientY-t+'px';
};
oDiv.onmouseup=function(){
document.onmousemove=null;
oDiv.onmouseup=null;
}
}
}
Vue:
import drag from 'drag.js'
Vue.directive('drag',drag)
HTML:
<div v-drag>我可以拖拽</div>
2. 圖片加載
圖片在加載過程中,未加載完成時,使用一個隨機(jī)的顏色占位,圖片加載完后直接顯示,可以使用自定義指令來完成
HTML:
<img v-imgUrl="url"></img> //參數(shù)不可以直接填寫url地址
data () {
url:'src/assets/logo.png'
}
Vue:
Vue.directive('imgUrl',function(el,binding){
var color=Math.floor(Math.random()*1000000);//設(shè)置隨機(jī)顏色
el.style.backgroundColor='#'+color;
var img=new Image();
img.src=binding.value;// -->binding.value指的是指令后的參數(shù)
img.onload=function(){
el.style.backgroundColor='';
el.src=binding.value;
}
})
可以使用lodash.js工具庫
vue更多的API整理-->GO
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在vue2中v-model使用的還是挺多的,不過這個指令一般是用在了輸入框中,并且這個指令其實就是個語法糖,下面這篇文章主要給大家介紹了關(guān)于vue3組件中v-model的使用以及深入講解的相關(guān)資料,需要的朋友可以參考下2021-09-09
vue.js 解決v-model讓select默認(rèn)選中不生效的問題
這篇文章主要介紹了vue.js 解決v-model讓select默認(rèn)選中不生效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue axios獲取token臨時令牌封裝案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue.js內(nèi)部自定義指令與全局自定義指令的實現(xiàn)詳解（利用directive）
這篇文章主要給大家介紹了關(guān)于vue.js內(nèi)部自定義指令與全局自定義指令的實現(xiàn)方法，vue.js中實現(xiàn)自定義指令的主要是利用directive，directive這個單詞是我們寫自定義指令的關(guān)鍵字，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
本文主要介紹了ElementUI中el-tabs事件綁定的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
下面小編就為大家分享一篇基于vue 動態(tài)加載圖片src的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
本篇文章主要介紹了Vue Spa切換頁面時更改標(biāo)題的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
v-if 導(dǎo)致 elementui 表單校驗失效問題解決方案
在使用 elementui 表單的過程中,某些表單項需要通過 v-if 來判斷是否展示,但是這些表單項出現(xiàn)了檢驗失效的問題,今天小編給大家介紹v-if 導(dǎo)致 elementui 表單校驗失效問題解決方案,感興趣的朋友一起看看吧2024-01-01
Vue3+vite實現(xiàn)使用svg可改變顏色的全過程
Vue3 + Vite 使用 SVG 的方法主要是為了引入和利用圖標(biāo)庫、自定義組件以及通過插件簡化項目構(gòu)建過程,這篇文章給大家介紹了Vue3+vite實現(xiàn)使用svg可改變顏色的全過程,需要的朋友可以參考下2024-07-07
vue 設(shè)置 input 為不可以編輯的實現(xiàn)方法
今天小編就為大家分享一篇vue 設(shè)置 input 為不可以編輯的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09