溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
很多教程都是在講自定義指令的概念和語法,看的相當蛋疼.本文不講語法和概念,只講用法.
自定義指令基本就是用來操作DOM的,雖然官方推薦數據驅動視圖,有時候還是需要自定義指令來操作DOM,指令可復用.
1. 自定義指令實現拖拽
HTML:
<div v-drag>我可以拖拽</div>
JS:
Vue.directive('drag',
inserted:function(el){ //inserted 鉤子函數:當元素被插入父元素時觸發,可省略
let oDiv=el; //el --> 觸發的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來構建項目.
自定義指令的好處就是不管之前是用什么寫的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. 圖片加載
圖片在加載過程中,未加載完成時,使用一個隨機的顏色占位,圖片加載完后直接顯示,可以使用自定義指令來完成
HTML:
<img v-imgUrl="url"></img> //參數不可以直接填寫url地址
data () {
url:'src/assets/logo.png'
}
Vue:
Vue.directive('imgUrl',function(el,binding){
var color=Math.floor(Math.random()*1000000);//設置隨機顏色
el.style.backgroundColor='#'+color;
var img=new Image();
img.src=binding.value;// -->binding.value指的是指令后的參數
img.onload=function(){
el.style.backgroundColor='';
el.src=binding.value;
}
})
可以使用lodash.js工具庫
vue更多的API整理-->GO
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
