溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
簡單編寫一個vue插件，當點擊時觸發notify插件，dom中出現相應內容并且在相應時間之后清除，我們可以在根組件中設定通知內容和延遲消失時間。
1. 基礎知識
我們首先初始化一個vue項目，刪除不需要的組件和樣式，主要針對src下一些初始化資源，有過vue項目基礎的應該很容易理解，如果沒有vue基礎建議先熟悉每個初始化文件的作用。
關于vue中如何開發插件可以直接看vue官方文檔，簡單了解插件開發過程，vue插件文檔。
現在我們在src目錄下新建一個plugin文件夾，里面存放要開發的插件notify.js
// notify.js
let notify = { //需要在此對象擁有一個install 方法
};
notify.install = function () {
alert('tangj')
}
// 導出這個對象，如果使用Vue.use()就會自動調用install方法
export default notify;
然后在main函數導入這個模塊并使用
import notify from './plugin/notify.js' Vue.use(notify)
運行這個vue項目可以看到，頁面開始加載有一個彈出框，說明我們創建的插件調用成功
2. notify.js主要功能
上面我們知道了，Vue.use()會自動調用install方法，install第一個參數為Vue構造函數，第二個參數即為輸入的內容，默認undefined，所以我們在調用一開始的時候為Vue這個構造函數的原型上添加一個$notify方法，此后，每一個Vue的實例都能調用這個方法，這樣我們就可以通過給根組件綁定一個點擊事件，讓$notify執行。
當然這樣還是不夠的，回到開頭說的，根組件可以設定通知內容和通知延遲時間，相當于給this.$notify傳遞兩個參數，第一個是通知內容，第二個是延遲時間。
因此，原型上的notify函數還得接受兩個參數，當有通知內容把通知內容替代，有延遲時間把延遲時間替代，為了插件的完整性，記得要給參數設定默認值。
總結一下業務邏輯：點擊頁面需要出現一個通知內容，經過延遲時間后消失，所以我們可以導入一個模塊，并把這個模塊掛載到頁面上，經過相應的延遲時間后移除
import modal from './notify.vue'
let notify = { //需要在此對象擁有一個install 方法
};
notify.install = function (Vue,options={delay:3000}) {
Vue.prototype.$notify = function (message,opt={}) {
options = {...options,...opt}; //用自己調用插件時傳遞過來的屬性覆蓋默認設置的值
let v = Vue.extend(modal); //返回的是一個構造函數的子類，參數是包含組件選項的對象
let vm = new v;
let oDiv = document.createElement('div'); //創建一個div將實例掛載到元素上
vm.$mount(oDiv);
vm.value = message;
document.body.appendChild(vm.$el);
setTimeout(()=>{ //根據delay將dom元素移除
document.body.removeChild(vm.$el);
},options.delay)
}
}
// 導出這個對象，如果使用Vue.use()就會自動調用install方法
export default notify;
3. 完善notify.js
現在還有一個問題，我們不斷點擊的時候，會通知很多個組件，這顯然不符合預期
解決的辦法很簡單，我們只要在執行之前判斷是否已經存在了這個實例，如果存在直接返回不再繼續，如果不存在，那么執行往后的邏輯
notify.install = function (Vue,options={delay:3000}) {
Vue.prototype.$notify = function (message,opt={}) {
if(notify.el)return;//判斷dom上是否存在這個實例
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; //把實例給notify對象
setTimeout(()=>{
document.body.removeChild(vm.$el);
notify.el = null; // 清空這個對象
},options.delay)
}
}
最后
這是很簡單的一個vue插件寫法，我們可以用這種思維創造很多有用的插件，比如vue-router、vue-awesome-swiper等等，很大程度上提高了開發效率
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
