前言
隨著 Vue.js 越來越火，Vue.js 的相關外掛也在不斷的被貢獻出來，數不勝數。比如官方推薦的 vue-router、vuex 等，都是非常優秀的外掛。但是我們更多的人還只停留在使用的階段，比較少自己開發。所以接下來會通過一個簡單的 vue-toast 外掛，來了解掌握外掛的開發和使用。
認識外掛
想要開發外掛，先要認識一個外掛是什麼樣子的。
Vue.js 的外掛應當有一個公開方法 install 。這個方法的第一個引數是 Vue 構造器 , 第二個引數是一個可選的選項物件:
MyPlugin.install = function (Vue, options) {
Vue.myGlobalMethod = function () { // 1. 新增全域性方法或屬性，如: vue-custom-element
// 邏輯...
}
Vue.directive('my-directive', { // 2. 新增全域性資源：指令/過濾器/過渡等，如 vue-touch
bind (el, binding, vnode, oldVnode) {
// 邏輯...
}
...
})
Vue.mixin({
created: function () { // 3. 通過全域性 mixin方法新增一些元件選項，如: vuex
// 邏輯...
}
...
})
Vue.prototype.$myMethod = function (options) { // 4. 新增例項方法，通過把它們新增到 Vue.prototype 上實現
// 邏輯...
}
}複製程式碼接下來要講到的 vue-toast 外掛則是通過新增例項方法實現的。我們先來看個小例子。先新建個js檔案來編寫外掛：toast.js
// toast.js
var Toast = {};
Toast.install = function (Vue, options) {
Vue.prototype.$msg = 'Hello World';
}
module.exports = Toast;複製程式碼在 main.js 中，需要匯入 toast.js 並且通過全域性方法 Vue.use() 來使用外掛：
// main.js
import Vue from 'vue';
import Toast from './toast.js';
Vue.use(Toast);複製程式碼然後，我們在元件中來獲取該外掛定義的 $msg 屬性。
// App.vue
export default {
mounted(){
console.log(this.$msg); // Hello World
}
}複製程式碼可以看到，控制檯成功的列印出了 Hello World 。既然 $msg 能獲取到，那麼我們就可以來實現我們的 vue-toast 外掛了。
開發 vue-toast
需求：在元件中通過呼叫 this.$toast('網路請求失敗') 來彈出提示，預設在底部顯示。可以通過呼叫 this.$toast.top() 或 this.$toast.center() 等方法來實現在不同位置顯示。
整理一下思路，彈出提示的時候，我可以在 body 中新增一個 div 用來顯示提示資訊，不同的位置我通過新增不同的類名來定位，那就可以開始寫了。
// toast.js
var Toast = {};
Toast.install = function (Vue, options) {
Vue.prototype.$toast = (tips) => {
let toastTpl = Vue.extend({ // 1、建立構造器，定義好提示資訊的模板
template: '<div class="vue-toast">' + tips + '</div>'
});
let tpl = new toastTpl().$mount().$el; // 2、建立例項，掛載到文件以後的地方
document.body.appendChild(tpl); // 3、把建立的例項新增到body中
setTimeout(function () { // 4、延遲2.5秒後移除該提示
document.body.removeChild(tpl);
}, 2500)
}
}
module.exports = Toast;複製程式碼好像很簡單，我們就實現了 this.$toast() ，接下來顯示不同位置。
// toast.js
['bottom', 'center', 'top'].forEach(type => {
Vue.prototype.$toast[type] = (tips) => {
return Vue.prototype.$toast(tips,type)
}
})複製程式碼這裡把 type 傳給 $toast 在該方法裡進行不同位置的處理，上面說了通過新增不同的類名(toast-bottom、toast-top、toast-center)來實現，那 $toast 方法需要小小修改一下。
Vue.prototype.$toast = (tips,type) => { // 新增 type 引數
let toastTpl = Vue.extend({ // 模板新增位置類
template: '<div class="vue-toast toast-'+ type +'">' + tips + '</div>'
});
...
}複製程式碼好像差不多了。但是如果我想預設在頂部顯示，我每次都要呼叫 this.$toast.top() 好像就有點多餘了，我能不能 this.$toast() 就直接在我想要的地方呢？還有我不想要 2.5s 後才消失呢？這時候注意到 Toast.install(Vue,options) 裡的 options 引數，我們可以在 Vue.use() 通過 options 傳進我們想要的引數。最後修改外掛如下：
var Toast = {};
Toast.install = function (Vue, options) {
let opt = {
defaultType:'bottom', // 預設顯示位置
duration:'2500' // 持續時間
}
for(let property in options){
opt[property] = options[property]; // 使用 options 的配置
}
Vue.prototype.$toast = (tips,type) => {
if(type){
opt.defaultType = type; // 如果有傳type，位置則設為該type
}
if(document.getElementsByClassName('vue-toast').length){
// 如果toast還在，則不再執行
return;
}
let toastTpl = Vue.extend({
template: '<div class="vue-toast toast-'+opt.defaultType+'">' + tips + '</div>'
});
let tpl = new toastTpl().$mount().$el;
document.body.appendChild(tpl);
setTimeout(function () {
document.body.removeChild(tpl);
}, opt.duration)
}
['bottom', 'center', 'top'].forEach(type => {
Vue.prototype.$toast[type] = (tips) => {
return Vue.prototype.$toast(tips,type)
}
})
}
module.exports = Toast;複製程式碼這樣子一個簡單的 vue 外掛就實現了，並且可以通過 npm 打包釋出，下次就可以使用 npm install 來安裝了。
原始碼地址：vue-toast
更多文章：blog
微信讚賞
