Vue插件开发的一些总结

1. 前言

以前在封装的全局公共组件时使用到了install和Vue.use()方法，后来看一篇文章才知道这两个方法是用来开发插件的。刚好最近也有开发插件的需求，就从官方文档上看了看教程。然后自己鼓捣了一个，记录一下流程。

2. 如何开发，使用插件

Vue官方文档是这样写的

plugins.jpg

不知道大家怎么看，反正我第一次看的是一脸懵逼。完全不知道从哪里开始。网上找了不少的文档，最后自己试着封装了一个插件，又去查阅了对应api才弄明白到底是怎么回事。

3. toast插件封装

封装一个web后台的toast弹窗。可以设置弹窗的类型，文本和显示时间。

3-1. 效果图

success.jpg

error.jpg

loading.jpg

4. 封装插件

4. 结构代码

4-1. 弹窗component代码：

1. 因为是单独的提示弹窗，所以封装成element的message弹窗模式。首先先搭建出弹窗的主体和样式。

2. 分三种类型的弹窗，成功，失败和加载类型的弹窗。3个data分别控制显示，文本以及类型。除去加载类型的弹窗，其他两种类型弹窗都可以通过点击遮罩关闭。

4-2. 注册插件toast代码：

有了基础的模板后，我们开始注册对应的插件

import ToastComponent from "./toast.vue";

const Toast = {};

// 注册Toast
Toast.install = (Vue) => {
  // 生成Vue Toast组件的构造器
  const ToastConstructor = Vue.extend(ToastComponent);
  // 生成一个Toast组件的实例
  const instance = new ToastConstructor();

  // 将这个实例通过DOM API 把它插入文档中
  instance.$mount();
  document.body.appendChild(instance.$el);

  // 通过Vue的原型注册一个方法
  // 让所有实例共享这个方法
  Vue.prototype.$toast = (message, options = {
    type: "error",
    duration: 3000
  }) => {
    // 设置相关参数
    instance.tipsText = message;
    instance.tipsType = options.type;
    instance.show = true;
    if (options.duration !== 0) {
      // 定时关闭
      let timer = setTimeout(() => {
        clearTimeout(timer);
        instance.show = false;
      }, options.duration);
    }
    // 加载的弹窗需要异步关闭，所一return出close方法关闭弹窗
    return {
      close() {
        instance.show = false;
      }
    };
  };
};

export default Toast;

4-3. 方法详解

1. extend方法
   extend方法是Vue 的基础构造器。类似于commponent方法，也是传入一个vue的实例对象，与之不同的是extend方法会生成一个传入的Vue实例对象的构造器，再通过这个构造器实例化的对象就可以访问传入的vue实例的属性和方法了。
2. $mount方法

官方文档如下图

mount.jpg

很显然在上述代码中instance生成的时候它处于“未挂载”状态的，所以我们必须通过 $mount把他挂载到指定的元素或者通过DOM API插入文档中。我这里使用的是通过DOM API插入文档中。

4.4 注册和使用方式

1. 在Vue的原型上绑定对应的$toast方法，设置默认的options参数和处理方法。
2. main.js引入toast.js

// 引入封装的黑屏遮罩插件
import Toast from './plugin/toast/toast.js';
// 应用引入的相关插件和组件
Vue.use(Toast);
// 页面中调用 需要手动关闭
this.$toast("我是加载弹窗", {
   type: "loading",
   duration: 0
});

开发这个插件的主要目的还是弄懂插件的开发流程，增强自己对vue的理解。开发插件的方法一共有4种，目前我这个是通过添加 Vue实例方法，通过把它们添加到 Vue.prototype上实现。

后面我也会出其它开发插件方法的文章。如果觉得喜欢可以点个赞~。