Vue.directive自定義指令的使用詳解
很多教程都是在講自定義指令的概念和語法,看的相當(dāng)?shù)疤?本文不講語法和概念,只講用法.
自定義指令基本就是用來操作DOM的,雖然官方推薦數(shù)據(jù)驅(qū)動(dòng)視圖,有時(shí)候還是需要自定義指令來操作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來構(gòu)建項(xiàng)目.
自定義指令的好處就是不管之前是用什么寫的JQuery還好或是原生js也好都可以直接拿來封裝成自定義指令,不需要重寫
例如這個(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. 圖片加載
圖片在加載過程中,未加載完成時(shí),使用一個(gè)隨機(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
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于腳手架創(chuàng)建Vue項(xiàng)目實(shí)現(xiàn)步驟詳解
這篇文章主要介紹了基于腳手架創(chuàng)建Vue項(xiàng)目實(shí)現(xiàn)步驟詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
vue時(shí)間格式總結(jié)以及轉(zhuǎn)換方法詳解
項(xiàng)目中后臺(tái)返回的時(shí)間有多種形式,時(shí)間戳、ISO標(biāo)準(zhǔn)時(shí)間格式等，我們需要轉(zhuǎn)化展示成能看的懂得時(shí)間格式,下面這篇文章主要給大家介紹了關(guān)于vue時(shí)間格式總結(jié)以及轉(zhuǎn)換方法的相關(guān)資料,需要的朋友可以參考下2022-12-12
Vue 數(shù)組和對(duì)象更新,但是頁面沒有刷新的解決方式
今天小編就為大家分享一篇Vue 數(shù)組和對(duì)象更新,但是頁面沒有刷新的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
今天小編就為大家分享一篇vue-dplayer 視頻播放器實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue路由$router.push()使用query傳參的實(shí)際開發(fā)使用
在vue項(xiàng)目中我們用函數(shù)式編程this.$router.push跳轉(zhuǎn),用query傳遞一個(gè)對(duì)象時(shí)要把這個(gè)對(duì)象先轉(zhuǎn)化為字符串,然后在接收的時(shí)候要轉(zhuǎn)化為對(duì)象,下面這篇文章主要給大家介紹了關(guān)于vue路由$router.push()使用query傳參的實(shí)際開發(fā)使用,需要的朋友可以參考下2022-11-11
Vue 2.0學(xué)習(xí)筆記之Vue中的computed屬性
本篇文章主要介紹了Vue 2.0學(xué)習(xí)筆記之Vue中的computed屬性，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
vue項(xiàng)目移動(dòng)端實(shí)現(xiàn)ip輸入框問題
這篇文章主要介紹了vue項(xiàng)目移動(dòng)端實(shí)現(xiàn)ip輸入框問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
vue3調(diào)度器effect的scheduler功能實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了vue3調(diào)度器effect的scheduler功能實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了Vue keepAlive頁面強(qiáng)制刷新方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
使用vant-picker實(shí)現(xiàn)自定義內(nèi)容,根據(jù)內(nèi)容添加圖標(biāo)
這篇文章主要介紹了使用vant-picker實(shí)現(xiàn)自定義內(nèi)容，根據(jù)內(nèi)容添加圖標(biāo)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12