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

1. 基礎(chǔ)知識
我們首先初始化一個vue項(xiàng)目,刪除不需要的組件和樣式,主要針對src下一些初始化資源,有過vue項(xiàng)目基礎(chǔ)的應(yīng)該很容易理解,如果沒有vue基礎(chǔ)建議先熟悉每個初始化文件的作用。
關(guān)于vue中如何開發(fā)插件可以直接看vue官方文檔,簡單了解插件開發(fā)過程,vue插件文檔。
現(xiàn)在我們在src目錄下新建一個plugin文件夾,里面存放要開發(fā)的插件notify.js
// notify.js
let notify = { //需要在此對象擁有一個install 方法
};
notify.install = function () {
alert('tangj')
}
// 導(dǎo)出這個對象,如果使用Vue.use()就會自動調(diào)用install方法
export default notify;
然后在main函數(shù)導(dǎo)入這個模塊并使用
import notify from './plugin/notify.js' Vue.use(notify)
運(yùn)行這個vue項(xiàng)目可以看到,頁面開始加載有一個彈出框,說明我們創(chuàng)建的插件調(diào)用成功

2. notify.js主要功能
上面我們知道了,Vue.use()會自動調(diào)用install方法,install第一個參數(shù)為Vue構(gòu)造函數(shù),第二個參數(shù)即為輸入的內(nèi)容,默認(rèn)undefined,所以我們在調(diào)用一開始的時候?yàn)閂ue這個構(gòu)造函數(shù)的原型上添加一個$notify方法,此后,每一個Vue的實(shí)例都能調(diào)用這個方法,這樣我們就可以通過給根組件綁定一個點(diǎn)擊事件,讓$notify執(zhí)行。
當(dāng)然這樣還是不夠的,回到開頭說的,根組件可以設(shè)定通知內(nèi)容和通知延遲時間,相當(dāng)于給this.$notify傳遞兩個參數(shù),第一個是通知內(nèi)容,第二個是延遲時間。
因此,原型上的notify函數(shù)還得接受兩個參數(shù),當(dāng)有通知內(nèi)容把通知內(nèi)容替代,有延遲時間把延遲時間替代,為了插件的完整性,記得要給參數(shù)設(shè)定默認(rèn)值。
總結(jié)一下業(yè)務(wù)邏輯:點(diǎn)擊頁面需要出現(xiàn)一個通知內(nèi)容,經(jīng)過延遲時間后消失,所以我們可以導(dǎo)入一個模塊,并把這個模塊掛載到頁面上,經(jīng)過相應(yīng)的延遲時間后移除
import modal from './notify.vue'
let notify = { //需要在此對象擁有一個install 方法
};
notify.install = function (Vue,options={delay:3000}) {
Vue.prototype.$notify = function (message,opt={}) {
options = {...options,...opt}; //用自己調(diào)用插件時傳遞過來的屬性覆蓋默認(rèn)設(shè)置的值
let v = Vue.extend(modal); //返回的是一個構(gòu)造函數(shù)的子類,參數(shù)是包含組件選項(xiàng)的對象
let vm = new v;
let oDiv = document.createElement('div'); //創(chuàng)建一個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)出這個對象,如果使用Vue.use()就會自動調(diào)用install方法
export default notify;
3. 完善notify.js
現(xiàn)在還有一個問題,我們不斷點(diǎn)擊的時候,會通知很多個組件,這顯然不符合預(yù)期

解決的辦法很簡單,我們只要在執(zhí)行之前判斷是否已經(jīng)存在了這個實(shí)例,如果存在直接返回不再繼續(xù),如果不存在,那么執(zhí)行往后的邏輯
notify.install = function (Vue,options={delay:3000}) {
Vue.prototype.$notify = function (message,opt={}) {
if(notify.el)return;//判斷dom上是否存在這個實(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對象
setTimeout(()=>{
document.body.removeChild(vm.$el);
notify.el = null; // 清空這個對象
},options.delay)
}
}
最后
這是很簡單的一個vue插件寫法,我們可以用這種思維創(chuàng)造很多有用的插件,比如vue-router、vue-awesome-swiper等等,很大程度上提高了開發(fā)效率
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue3?ts編寫echart是tooltip無法展示的解決
這篇文章主要介紹了vue3?ts編寫echart是tooltip無法展示的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10
Vue3 axios配置以及cookie的使用方法實(shí)例演示
這篇文章主要介紹了Vue3 axios配置以及cookie的使用方法,需要的朋友可以參考下2023-02-02
vue動態(tài)添加表單validateField驗(yàn)證功能實(shí)現(xiàn)
這篇文章主要介紹了vue動態(tài)添加表單validateField驗(yàn)證功能實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時定位功能
本系列文章介紹一個簡單的實(shí)時定位示例,基于VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時定位功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2021-09-09
詳解vuex之store拆分即多模塊狀態(tài)管理(modules)篇
這篇文章主要介紹了詳解vuex之store拆分即多模塊狀態(tài)管理(modules)篇,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11

