toast.vue：

<template>
  <div id="toastWrap" :class="[className,showAnimation ?‘fadein‘:‘fadeout‘,appointId==‘‘?‘fixed‘:‘absolute‘]" v-if="show">
    <span  :class="[‘iconfont‘,type]"></span>
    {{text}}
    </div>
</template>
<script>
export default {
  name: ‘‘,
  data(){
    return {}
  },
  components: {},
  created(){},
  mounted(){},
  methods: {}
}
</script>
<style scoped>
 .fixed{
    position: fixed;
 }
 .absolute{
  position: absolute;;
 }
 #toastWrap{
    left: 50%;
    top:50%;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
    border-radius: 5px;
    transform: translate(-50%,-50%);
    color:#fff;
  }
   .fadein {
    animation: animate_in 0.25s;
  }
  .fadeout {
    animation: animate_out 0.25s;
    opacity: 0;
  }
  @keyframes animate_in {
    0% {
      opacity: 0;
    }
    100%{
      opacity: 1;
    }
  }
  @keyframes animate_out {
    0% {
      opacity: 1;
    }
    100%{
      opacity: 0;
    }
  }
</style>

index.js：

import vue from ‘vue‘
import toastComponent from ‘./toast.vue‘
const ToastConstructor = vue.extend(toastComponent)
console.log("初始化一个vue构造器")
console.log(ToastConstructor)

function showToast(obj) {
    // 实例化一个 toast.vue
    let param = {
        text: obj.text || ‘‘,
        // className 自定义class
        className: obj.className || ‘‘,
        type: obj.type || ‘icon-tishi1‘,
        // appointId 父元素class 用于定位
        appointId: obj.appointId || ‘‘,
        duration: obj.duration || 3000
    }
    console.log("传参情况")
    console.log(param)
    const toastDom = new ToastConstructor({
            el: document.createElement(‘div‘),
            data() {
                return {
                    text: param.text,
                    show: true,
                    className: param.className,
                    type: param.type,
                    showAnimation: true,
                    appointId: param.appointId
                }
            }
        })
        //挂载到文档
    if (param.appointId !== ‘‘) {
        console.log("appointId不等于空")
        console.log(param.appointId)
        document.getElementById(param.appointId).appendChild(toastDom.$el)
    } else {
        console.log("appointId等于空")
        document.body.appendChild(toastDom.$el)
    }
    setTimeout(() => { toastDom.showAnimation = false }, param.duration - 1250)
    setTimeout(() => { toastDom.show = false }, param.duration)

}

function registryToast() {
    // 将组件注册到 vue 的 原型链里去,
    // 这样就可以在所有 vue 的实例里面使用 this.$toast()
    vue.prototype.$toast = showToast
}

export default registryToast

main.js：

import toastComponent from ‘../src/components/toast‘
Vue.use(toastComponent)

在需要使用的地方调用

 that.$toast({text:‘填写用户名/手机号/邮箱‘,className:"loginTip",appointId:‘loginFrom‘,duration:3500})