Vue.js 插件开发详解

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 上实现
 // 逻辑...
 }
}

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

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

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

// 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;

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

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

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;