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 中添加一个 div 用来显示提示信息，不同的位置我通过添加不同的类名来定位，那就可以开始写了。

 
 
 
 

  
  
  
  
// toast.js 
  
  
  
  
var Toast = {}; 
  
  
  
  
Toast.install = function (Vue, options) { 
  
  
  
  
    Vue.prototype.$toast = (tips) => { 
  
  
  
  
        let toastTpl = Vue.extend({     // 1、创建构造器，定义好提示信息的模板 
  
  
  
  
            template: '' + tips + '