詳解Vue.js 外掛程式開發

前言

隨著 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 中添加一個 p 用來顯示提示訊息，不同的位置我透過添加不同的類別名稱來定位，那就可以開始寫了。

// toast.js
var Toast = {};
Toast.install = function (Vue, options) {
    Vue.prototype.$toast = (tips) => {
        let toastTpl = Vue.extend({     // 1、创建构造器，定义好提示信息的模板
            template: &#39;<p class="vue-toast">&#39; + tips + &#39;</p>&#39;
        });
        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() ，接下來顯示不同位置。

<p style="margin-bottom: 7px;">// toast.js<br/>[&#39;bottom&#39;, &#39;center&#39;, &#39;top&#39;].forEach(type => {<br/>    Vue.prototype.$toast[type] = (tips) => {<br/>        return Vue.prototype.$toast(tips,type)<br/>    }<br/>})<br/></p>

這裡把type 傳給$toast 在該方法裡進行不同位置的處理，上面說了通過添加不同的類名(toast-bottom、toast-top、toast-center)來實現，那$toast 方法需要小小修改一下。

Vue.prototype.$toast = (tips,type) => {     // 添加 type 参数
    let toastTpl = Vue.extend({             // 模板添加位置类
        template: &#39;<p class="vue-toast toast-&#39;+ type +&#39;">&#39; + tips + &#39;</p>&#39;
    });
    ...
}

好像差不多了。但如果我想預設在頂部顯示，我每次都要調用 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: &#39;<p class="vue-toast toast-&#39;+opt.defaultType+&#39;">&#39; + tips + &#39;</p>&#39;
        });
        let tpl = new toastTpl().$mount().$el;
        document.body.appendChild(tpl);
        setTimeout(function () {
            document.body.removeChild(tpl);
        }, opt.duration)
    }
    [&#39;bottom&#39;, &#39;center&#39;, &#39;top&#39;].forEach(type => {
        Vue.prototype.$toast[type] = (tips) => {
            return Vue.prototype.$toast(tips,type)
        }
    })
}
module.exports = Toast;

這樣子一個簡單的 vue 插件就實現了，並且可以透過 npm 打包發布，下次就可以使用 npm install 來安裝了

#

以上是詳解Vue.js 外掛程式開發的詳細內容。更多資訊請關注PHP中文網其他相關文章！