快捷導(dǎo)航

基于vue框架手寫一個(gè)notify插件實(shí)現(xiàn)通知功能的方法

更新時(shí)間：2019年03月31日 11:40:40 作者：唐吉sir

這篇文章主要介紹了基于vue框架手寫一個(gè)notify插件實(shí)現(xiàn)通知功能的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

簡單編寫一個(gè)vue插件，當(dāng)點(diǎn)擊時(shí)觸發(fā)notify插件，dom中出現(xiàn)相應(yīng)內(nèi)容并且在相應(yīng)時(shí)間之后清除，我們可以在根組件中設(shè)定通知內(nèi)容和延遲消失時(shí)間。

1. 基礎(chǔ)知識(shí)

我們首先初始化一個(gè)vue項(xiàng)目，刪除不需要的組件和樣式，主要針對(duì)src下一些初始化資源，有過vue項(xiàng)目基礎(chǔ)的應(yīng)該很容易理解，如果沒有vue基礎(chǔ)建議先熟悉每個(gè)初始化文件的作用。

關(guān)于vue中如何開發(fā)插件可以直接看vue官方文檔，簡單了解插件開發(fā)過程，vue插件文檔。

現(xiàn)在我們?cè)趕rc目錄下新建一個(gè)plugin文件夾，里面存放要開發(fā)的插件notify.js

// notify.js
let notify = {  //需要在此對(duì)象擁有一個(gè)install 方法

};
notify.install = function () {
  alert('tangj')
}
// 導(dǎo)出這個(gè)對(duì)象，如果使用Vue.use()就會(huì)自動(dòng)調(diào)用install方法
export default notify;

然后在main函數(shù)導(dǎo)入這個(gè)模塊并使用

import notify from './plugin/notify.js'
Vue.use(notify)

運(yùn)行這個(gè)vue項(xiàng)目可以看到，頁面開始加載有一個(gè)彈出框，說明我們創(chuàng)建的插件調(diào)用成功

2. notify.js主要功能

上面我們知道了，Vue.use()會(huì)自動(dòng)調(diào)用install方法，install第一個(gè)參數(shù)為Vue構(gòu)造函數(shù)，第二個(gè)參數(shù)即為輸入的內(nèi)容，默認(rèn)undefined，所以我們?cè)谡{(diào)用一開始的時(shí)候?yàn)閂ue這個(gè)構(gòu)造函數(shù)的原型上添加一個(gè)$notify方法，此后，每一個(gè)Vue的實(shí)例都能調(diào)用這個(gè)方法，這樣我們就可以通過給根組件綁定一個(gè)點(diǎn)擊事件，讓$notify執(zhí)行。

當(dāng)然這樣還是不夠的，回到開頭說的，根組件可以設(shè)定通知內(nèi)容和通知延遲時(shí)間，相當(dāng)于給this.$notify傳遞兩個(gè)參數(shù)，第一個(gè)是通知內(nèi)容，第二個(gè)是延遲時(shí)間。

因此，原型上的notify函數(shù)還得接受兩個(gè)參數(shù)，當(dāng)有通知內(nèi)容把通知內(nèi)容替代，有延遲時(shí)間把延遲時(shí)間替代，為了插件的完整性，記得要給參數(shù)設(shè)定默認(rèn)值。

總結(jié)一下業(yè)務(wù)邏輯：點(diǎn)擊頁面需要出現(xiàn)一個(gè)通知內(nèi)容，經(jīng)過延遲時(shí)間后消失，所以我們可以導(dǎo)入一個(gè)模塊，并把這個(gè)模塊掛載到頁面上，經(jīng)過相應(yīng)的延遲時(shí)間后移除

import modal from './notify.vue'
let notify = {  //需要在此對(duì)象擁有一個(gè)install 方法

};
notify.install = function (Vue,options={delay:3000}) {    
  Vue.prototype.$notify = function (message,opt={}) {
    options = {...options,...opt}; //用自己調(diào)用插件時(shí)傳遞過來的屬性覆蓋默認(rèn)設(shè)置的值
    let v = Vue.extend(modal); //返回的是一個(gè)構(gòu)造函數(shù)的子類，參數(shù)是包含組件選項(xiàng)的對(duì)象
    let vm = new v;
    let oDiv = document.createElement('div'); //創(chuàng)建一個(gè)div將實(shí)例掛載到元素上
    vm.$mount(oDiv);
    vm.value = message;
    document.body.appendChild(vm.$el);
    setTimeout(()=>{ //根據(jù)delay將dom元素移除
      document.body.removeChild(vm.$el);
    },options.delay) 
  }
}
// 導(dǎo)出這個(gè)對(duì)象，如果使用Vue.use()就會(huì)自動(dòng)調(diào)用install方法
export default notify;

3. 完善notify.js

現(xiàn)在還有一個(gè)問題，我們不斷點(diǎn)擊的時(shí)候，會(huì)通知很多個(gè)組件，這顯然不符合預(yù)期

解決的辦法很簡單，我們只要在執(zhí)行之前判斷是否已經(jīng)存在了這個(gè)實(shí)例，如果存在直接返回不再繼續(xù)，如果不存在，那么執(zhí)行往后的邏輯

notify.install = function (Vue,options={delay:3000}) {    
  Vue.prototype.$notify = function (message,opt={}) {
    if(notify.el)return;//判斷dom上是否存在這個(gè)實(shí)例
    options = {...options,...opt}; 
    let v = Vue.extend(modal); 
    let vm = new v;
    let oDiv = document.createElement('div'); 
    vm.$mount(oDiv);
    vm.value = message;
    document.body.appendChild(vm.$el);
    notify.el = vm.$el;   //把實(shí)例給notify對(duì)象    
    setTimeout(()=>{ 
      document.body.removeChild(vm.$el);
      notify.el = null; // 清空這個(gè)對(duì)象
    },options.delay) 
  }
}

最后

這是很簡單的一個(gè)vue插件寫法，我們可以用這種思維創(chuàng)造很多有用的插件，比如vue-router、vue-awesome-swiper等等，很大程度上提高了開發(fā)效率

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: