vue实现自定义弹窗

在component下面新建一个toast文件夹，创建toast.vue和toast.js文件
toast.vue

<template>
    <div class="toast" :class="type? `toast--${type}`:''">
        <p>{{content}}p>
    div>
template>
<script>
    export default {
        data(){
            return{
                content:'',
                duration:3000,//定时器时间
                type:''
            }
        },
        mounted(){
            setTimeout(() => {
                this.$destroy(true);//3s后进行销毁
                this.$el.parentNode.removeChild(this.$el);
            },this.duration);
        }
    }
script>
<style lang="scss" scoped>
.toast {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  z-index: 9999;
  background: transparent;
     p {
        padding:0.24rem 0.44rem;
        font-size: 0.36rem;
        border-radius: 0.08rem;
        background: rgba(17, 17, 17, 0.7);
    }
    &--error p { background: rgba(255, 0, 0, 0.5); }
    &--success p { background: rgba(0, 255, 0, 0.5); }
}

style>

toast.js
使用基础 Vue.extend() 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

import Vue from 'vue';
import main from './toast.vue';
const ToastConstructor = Vue.extend(main);
let instance;
const Toast = function (options){
    instance = new ToastConstructor({
        data:options
    }).$mount();//渲染组件
    document.body.appendChild(instance.$el);//将组件挂载在body下
};
//当需要成功或者失败的回调时，可以选择以下方法
['success','error'].forEach((item)=>{
    Toast[item]=options=>{
        options.type=item;
        return Toast(options);
    }
})
export default Toast;

在main.js中引入toast.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Toast from '@/components/toast/toast.js';
Vue.config.productionTip = false;
// 将组件注册到 vue 的 原型链里去,
// 这样就可以在所有 vue 的实例里面使用 this.$Toast()
// Vue.prototype.$Toast= Toast
Vue.prototype.$Toast=Toast;
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在需要的页面可以通过this.$ Toast({content:‘老铁666’, duration:2000 });进行调用，需要成功的回调时可以通过this.$Toast.success({参数}),失败的回调跟成功的回调一样，将success替换成error即可