快捷導(dǎo)航

Vue.js 插件開發(fā)詳解

更新時間：2017年03月29日 09:23:09 作者：_林鑫

本文會通過一個簡單的vue-toast插件，來幫助了解掌握插件的開發(fā)和使用。具有很好的參考價值，下面跟著小編一起來看下吧

前言

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

認(rèn)識插件

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

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

MyPlugin.install = function (Vue, options) {
 Vue.myGlobalMethod = function () { // 1. 添加全局方法或?qū)傩?，? 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 上實現(xiàn)
 // 邏輯...
 }
}

接下來要講到的 vue-toast 插件則是通過添加實例方法實現(xiàn)的。我們先來看個小例子。先新建個js文件來編寫插件：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 并且通過全局方法 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 能獲取到，那么我們就可以來實現(xiàn)我們的 vue-toast 插件了。

開發(fā) vue-toast

需求：在組件中通過調(diào)用 this.$toast('網(wǎng)絡(luò)請求失敗') 來彈出提示，默認(rèn)在底部顯示?？梢酝ㄟ^調(diào)用 this.$toast.top() 或 this.$toast.center() 等方法來實現(xiàn)在不同位置顯示。

整理一下思路，彈出提示的時候，我可以在 body 中添加一個 div 用來顯示提示信息，不同的位置我通過添加不同的類名來定位，那就可以開始寫了。

// 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)建實例，掛載到文檔以后的地方
  document.body.appendChild(tpl);  // 3、把創(chuàng)建的實例添加到body中
  setTimeout(function () {  // 4、延遲2.5秒后移除該提示
   document.body.removeChild(tpl);
  }, 2500)
 }
}
module.exports = Toast;

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

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

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

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

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

var Toast = {};
Toast.install = function (Vue, options) {
 let opt = {
  defaultType:'bottom', // 默認(rèn)顯示位置
  duration:'2500'   // 持續(xù)時間
 }
 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;

這樣子一個簡單的 vue 插件就實現(xiàn)了，并且可以通過 npm 打包發(fā)布，下次就可以使用 npm install 來安裝了。

源碼地址：vue-toast

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: