解决：同时发起多个请求后，响应拦截后返回多个重复弹窗问题

最新推荐文章于 2023-09-25 16:16:29 发布

weixin_48746165

最新推荐文章于 2023-09-25 16:16:29 发布

阅读量802

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48746165/article/details/126585875

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、创建src/utils/resetPopup.js

import Vue from 'vue';
/**重置message，防止重复点击重复弹出message弹框 */
let messageInstance = null;
const resetMessage = (options) => {
    //关闭上一个弹窗，继续下一个弹窗
    if (messageInstance) {
        messageInstance.close() //手动关闭实例，调用它的 close 方法，详细内容请参考Element-ui官方文档。
    }
    messageInstance = Vue.prototype.$message(options)
};
['error', 'success', 'info', 'warning'].forEach(type => {
    resetMessage[type] = options => {
        if (typeof options === 'string') {
            options = {
                message: options
            }
        }
        options.type = type
        return resetMessage(options)
    }
})
export const Message = resetMessage;
/**重置Notify，防止重复点击重复弹出Notify弹框 */
let notifyInstance = null;
const resetNotify = (options) => {
    //关闭上一个弹窗，继续下一个弹窗
    if (notifyInstance) {
        notifyInstance.close() //手动关闭实例，调用它的 close 方法，详细内容请参考Element-ui官方文档。
    }
    notifyInstance = Vue.prototype.$notify(options)
};
['error', 'success', 'info', 'warning'].forEach(type => {
    resetNotify[type] = options => {
        if (typeof options === 'string') {
            options = {
                title: options
            }
        }
        options.type = type
        return resetNotify(options)
    }
})
export const Notify = resetNotify;

2、使用方式

import { Message , Notify } from '@/utils/resetPopup' //重置弹窗
Message({
    message: response.data.msg,
    type: 'error',
    duration: 2000
})
Notify({
    title: response.data.msg,
    type: 'error',
    duration: 2000
})