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`代码：

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

<!-- 全局的大黑屏提示插件 -->
<template>
  <transition name="el-fade-in">
    <div
      class="wrap"
      v-if="show"
      @click="closeWrap"
    >
      <!-- 失败 -->
      <div
        class="error_text"
        v-if="tipsType === 'error'"
      >
        <i class="el-icon-error tips_icon"></i>
        <span>{{ tipsText }}</span>
      </div>
      <!-- 成功 -->
      <div
        class="success_text"
        v-if="tipsType === 'success'"
      >
        <i class="el-icon-success tips_icon"></i>
        <span>{{ tipsText }}</span>
      </div>
      <!-- 加载 -->
      <div
        class="loading_text"
        v-if="tipsType === 'loading'"
      >
        <i class="el-icon-loading tips_icon"></i>
        <span>{{ tipsText }}</span>
      </div>
    </div>
  </transition>
</template>
<style
  type="text/less"
  lang="less"
  scoped
>
.wrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99999999999;
}

.error_text, .success_text, .loading_text{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 380px;
  height: 50px;
  line-height: 50px;
  border-radius: 5px;
  font-size: 14px;
}

.error_text {
  background-color: #FBDEDE;
  color: #F56C6C;
}

.success_text {
  background-color: #F0FAEB;
  color: #67C33A;
}

.loading_text {
  background-color: #ECF5FF;
  color: #409EFF;
}

.tips_icon {
  font-size: 15px;
  margin: 2px 20px 0;
}
</style>

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

<script>
/**
 *
 * @components 黑窗提示模板
 * @author csz 2020/07/23
 *
 */
export default {
  name: "ToastComponent",
  data() {
    return {
      show: false,
      tipsType: "error",
      tipsText: "提示"
    };
  },
  methods: {
    // 点击页面任何地方关闭黑窗
    closeWrap() {
      if (this.tipsType === "loading") {
        return;
      }
      this.show = false;
    }
  }
};
</script>

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. 方法详解

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

官方文档如下图

mount.jpg

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

4.4 注册和使用方式

在Vue的原型上绑定对应的$toast方法，设置默认的options参数和处理方法。
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上实现。

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