很多教程都是在講自定義指令的概念和語(yǔ)法,看的相當(dāng)?shù)疤?本文不講語(yǔ)法和概念,只講用法.
自定義指令基本就是用來(lái)操作DOM的,雖然官方推薦數(shù)據(jù)驅(qū)動(dòng)視圖,有時(shí)候還是需要自定義指令來(lái)操作DOM,指令可復(fù)用.
1. 自定義指令實(shí)現(xiàn)拖拽
HTML:
<div v-drag>我可以拖拽</div>
JS:
Vue.directive('drag', inserted:function(el){ //inserted 鉤子函數(shù):當(dāng)元素被插入父元素時(shí)觸發(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來(lái)構(gòu)建項(xiàng)目.
自定義指令的好處就是不管之前是用什么寫的JQuery還好或是原生js也好都可以直接拿來(lái)封裝成自定義指令,不需要重寫
例如這個(gè)拖拽:
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. 圖片加載
圖片在加載過(guò)程中,未加載完成時(shí),使用一個(gè)隨機(jī)的顏色占位,圖片加載完后直接顯示,可以使用自定義指令來(lái)完成
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工具庫(kù)
vue更多的API整理-->GO
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
