[[195748]]

隨著 Vue.js 越來(lái)越火，Vue.js 的相關(guān)插件也在不斷的被貢獻(xiàn)出來(lái)，數(shù)不勝數(shù)。比如官方推薦的 vue-router、vuex 等，都是非常優(yōu)秀的插件。但是我們更多的人還只停留在使用的階段，比較少自己開(kāi)發(fā)。所以接下來(lái)會(huì)通過(guò)一個(gè)簡(jiǎn)單的 vue-toast 插件，來(lái)了解掌握插件的開(kāi)發(fā)和使用。

認(rèn)識(shí)插件

想要開(kāi)發(fā)插件，先要認(rèn)識(shí)一個(gè)插件是什么樣子的。

Vue.js 的插件應(yīng)當(dāng)有一個(gè)公開(kāi)方法 install 。這個(gè)方法的***個(gè)參數(shù)是 Vue 構(gòu)造器 , 第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象:

MyPlugin.install = function (Vue, options) { 
  Vue.myGlobalMethod = function () {  // 1. 添加全局方法或?qū)傩?，? vue-custom-element 
    // 邏輯... 
  } 
  Vue.directive('my-directive', {  // 2. 添加全局資源：指令/過(guò)濾器/過(guò)渡等，如 vue-touch 
    bind (el, binding, vnode, oldVnode) { 
      // 邏輯... 
    } 
    ... 
  }) 
  Vue.mixin({ 
    created: function () {  // 3. 通過(guò)全局 mixin方法添加一些組件選項(xiàng)，如: vuex 
      // 邏輯... 
    } 
    ... 
  }) 
  Vue.prototype.$myMethod = function (options) {  // 4. 添加實(shí)例方法，通過(guò)把它們添加到 Vue.prototype 上實(shí)現(xiàn) 
    // 邏輯... 
  } 
} 

接下來(lái)要講到的 vue-toast 插件則是通過(guò)添加實(shí)例方法實(shí)現(xiàn)的。我們先來(lái)看個(gè)小例子。先新建個(gè)js文件來(lái)編寫(xiě)插件：toast.js

// toast.js 
var Toast = {}; 
Toast.install = function (Vue, options) { 
    Vue.prototype.$msg = 'Hello World'; 
} 
module.exports = Toast; 

在 main.js 中，需要導(dǎo)入 toast.js 并且通過(guò)全局方法 Vue.use() 來(lái)使用插件：

// main.js 
import Vue from 'vue'; 
import Toast from './toast.js'; 
Vue.use(Toast); 

然后，我們?cè)诮M件中來(lái)獲取該插件定義的 $msg 屬性。

// App.vue 
export default { 
    mounted(){ 
        console.log(this.$msg);         // Hello World 
    } 
} 

可以看到，控制臺(tái)成功的打印出了 Hello World 。既然 $msg 能獲取到，那么我們就可以來(lái)實(shí)現(xiàn)我們的 vue-toast 插件了。

開(kāi)發(fā) vue-toast

需求：在組件中通過(guò)調(diào)用 this.$toast(‘網(wǎng)絡(luò)請(qǐng)求失敗’) 來(lái)彈出提示，默認(rèn)在底部顯示。可以通過(guò)調(diào)用 this.$toast.top() 或 this.$toast.center() 等方法來(lái)實(shí)現(xiàn)在不同位置顯示。

整理一下思路，彈出提示的時(shí)候，我可以在 body 中添加一個(gè) div 用來(lái)顯示提示信息，不同的位置我通過(guò)添加不同的類(lèi)名來(lái)定位，那就可以開(kāi)始寫(xiě)了。

// toast.js 
var Toast = {}; 
Toast.install = function (Vue, options) { 
    Vue.prototype.$toast = (tips) => { 
        let toastTpl = Vue.extend({     // 1、創(chuàng)建構(gòu)造器，定義好提示信息的模板 
            template: '<div class="vue-toast">' + tips + '</div>' 
        }); 
        let tpl = new toastTpl().$mount().$el;  // 2、創(chuàng)建實(shí)例，掛載到文檔以后的地方 
        document.body.appendChild(tpl);     // 3、把創(chuàng)建的實(shí)例添加到body中 
        setTimeout(function () {        // 4、延遲2.5秒后移除該提示 
            document.body.removeChild(tpl); 
        }, 2500) 
    } 
} 
module.exports = Toast; 

好像很簡(jiǎn)單，我們就實(shí)現(xiàn)了 this.$toast() ，接下來(lái)顯示不同位置。

// toast.js 
['bottom', 'center', 'top'].forEach(type => { 
    Vue.prototype.$toast[type] = (tips) => { 
        return Vue.prototype.$toast(tips,type) 
    } 
}) 

這里把 type 傳給 $toast 在該方法里進(jìn)行不同位置的處理，上面說(shuō)了通過(guò)添加不同的類(lèi)名(toast-bottom、toast-top、toast-center)來(lái)實(shí)現(xiàn)，那 $toast 方法需要小小修改一下。

Vue.prototype.$toast = (tips,type) => {     // 添加 type 參數(shù) 
    let toastTpl = Vue.extend({             // 模板添加位置類(lèi) 
        template: '<div class="vue-toast toast-'+ type +'">' + tips + '</div>' 
    }); 
    ... 
} 

好像差不多了。但是如果我想默認(rèn)在頂部顯示，我每次都要調(diào)用 this.$toast.top() 好像就有點(diǎn)多余了，我能不能 this.$toast() 就直接在我想要的地方呢?還有我不想要 2.5s 后才消失呢?這時(shí)候注意到 Toast.install(Vue,options) 里的 options 參數(shù)，我們可以在 Vue.use() 通過(guò) options 傳進(jìn)我們想要的參數(shù)。***修改插件如下：

var Toast = {}; 
Toast.install = function (Vue, options) { 
    let opt = { 
        defaultType:'bottom',   // 默認(rèn)顯示位置 
        duration:'2500'         // 持續(xù)時(shí)間 
    } 
    for(let property in options){ 
        opt[property] = options[property];  // 使用 options 的配置 
    } 
    Vue.prototype.$toast = (tips,type) => { 
        if(type){ 
            opt.defaultType = type;         // 如果有傳type，位置則設(shè)為該type 
        } 
        if(document.getElementsByClassName('vue-toast').length){ 
            // 如果toast還在，則不再執(zhí)行 
            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; 

這樣子一個(gè)簡(jiǎn)單的 vue 插件就實(shí)現(xiàn)了，并且可以通過(guò) npm 打包發(fā)布，下次就可以使用 npm install 來(lái)安裝了。

源碼地址：vue-toast

【本文為51CTO專(zhuān)欄作者“林鑫”的原創(chuàng)稿件，轉(zhuǎn)載請(qǐng)通過(guò)微信公眾號(hào)聯(lián)系作者獲取授權(quán)】

戳這里，看該作者更多好文