vue公共弹窗方法封装

<template>
    <div   v-show='show'>
        <div ref="mask" class="mask" v-show="type===2">div>
        <div class="title"><span @click="close">span>{{title}}div>
        <div class="main">{{message}}<span v-show="type===2" @click="close(1)">我知道了span>div>
    div>
template>

export default {
    data(){
        return{
            title:'xxx',
            message:'xxxxxxxxx！', 
        }
    },
    updated(){
    
    },
    methods:{
        close(type){ 
        }
    }
}
</script>

然后新建一个js文件；

import ToastComponent from './alert.vue'// 引入先前写好的vue

const Toast = {};


// 注册Toast
Toast.install = function (Vue) {
    // 生成一个Vue的子类
    const ToastConstructor = Vue.extend(ToastComponent)
    // 生成一个该子类的实例
    const instance = new ToastConstructor();

    // 将这个实例挂载在我创建的div上
    // 并将此div加入全局挂载点内部
    instance.$mount(document.createElement('div'))
    document.body.appendChild(instance.$el);
    
    let timer = null;
    // 通过Vue的原型注册一个方法
    // 让所有实例共享这个方法 
    // 其中的duration是持续时间
    Vue.prototype.$toast = (msg,type = 1,title = '错误提示', duration = 2500,fun) => {
        if(instance.$data.toastBool == false)return;
        instance.$data.toastBool = false;
        clearTimeout(timer)//避免重复弹窗timer触发；造成异常；
        instance.message = msg;
        instance.type = type;
        instance.title = title;
        instance.show = true;
        instance.fun = fun;

        timer=setTimeout(() => {
            instance.$data.toastBool = true ;
            instance.show = false;
        }, duration);
    }
}

export default Toast

然后在main中调用安装

import toast from 'src'
vue.use(toast)
//此时就可以正常使用了；注意自己调整逻辑

然后封装一个弹窗方法，方便调用

export default {
    success (_this, message) {
        _this.$message({
            showClose: true,
            message,
            type: 'success'
        });
    }, 
    
};
// error:Error: Request failed with status code 401;状态码错误的；
// Error: timeout of 8000ms exceeded
//