封装toast插件

toast.vue

<template>
    <transition name="message">
        <div class="toastWrap" v-if="toastShow" v-html="toastVal"></div>
    </transition>
</template>

<script>
export default {
    name: 'Toast'
}
</script>

<style lang="less" scoped>
.toastWrap{
  padding:.2rem;
  position: fixed;
  top: 50%;
  transform: translate(-50%,-50%);
  left: 50%;
  margin:0 auto;
  z-index: 9999;
  background: rgba(0,0,0,.7);
  color: #fff;
  border-radius: 0.1rem;
}
</style>

toast.js

import Toast from './toast.vue'
let toastPlugin = {};
toastPlugin.install = function (Vue) {
  let instance;
  // 在Vue的原型上扩展方法
  Vue.showToast = Vue.prototype.$showToast = function (toastVal, time = 1000) {
    // Vue构造器，创建一个“子类”
    const ToastConstructor = Vue.extend(Toast);
    // 判断当前实例是不是已经存在
    if (!instance) {
      // 实例化插件并挂在到某一个元素上
      instance = new ToastConstructor({
        el: document.createElement('div'),
        data () {
          return {
            toastVal: toastVal,
            toastShow: false
          }
        }
      });
      // 添加在body内
      document.body.appendChild(instance.$el);
    }
    if (instance.toastShow) return;
    instance.toastShow = true;
    instance.toastVal = toastVal;
    let timer = setTimeout(res => {
      clearTimeout(timer);
      instance.toastShow = false;
    }, time);
  };
};
export default toastPlugin

**全局调用$toast方法就是触发了绑定在Vue原型上的showToast方法，
首先在main.js中引入并使用插件

import toastPlugin from './plugins/toast/toast'
Vue.use(toastPlugin )

vue文件中使用方法如下：

this.$showToast('这是一个tast弹窗',2000)

http.js中使用方法如下

import Vue from 'vue'
Vue.showToast('会话超时')