VUE 控制同一时间接口报错弹框个数

1、在utils文件夹下创建messageOnce.js文件,封装message对象类

import {Message} from 'element-ui'
// 私有属性,只在当前文件可用
const showMessage = Symbol('showMessage')
export default class domMessage {
    success (options, single = true) {
        this[showMessage]('success', options, single)
    }
    warning(options, single = true) {
        this[showMessage]('warning', options, single)
    }
    info(options, single = true) {
        this[showMessage]('info', options, single)
    }
    error(options, single = true) {
        this[showMessage]('error', options, single)
    }
    [showMessage] (type, options, single) {
        if (single) {
            // 关键代码,判断当前页是否有el-message标签,如果没有则执行弹窗操作
            if (document.getElementsByClassName('el-message').length === 0) {
                Message[type](options)
            }
        } else {
            Message[type](options)
        }
    }
}

2、在axios全局配置中引入messageOnce.js文件,用messageOnce.js中创建好的类进行报错提示即可

import domMessage from '@/utils/messageOnce'
const messageOnce = new domMessage()
messageOnce.error({message:'错误提示'});
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文基于工作项目开发,做的整理笔记前段时间公司有的小伙伴刚开始学习vue,就直接着手用在新项目上,以项目实战步步为...
    SeasonDe阅读 7,277评论 16 39
  • 列表进入详情页的传参问题。 本地开发环境请求服务器接口跨域的问题 axios封装和api接口的统一管理 UI库的按...
    zaven阅读 1,160评论 1 18
  • 为什么学习Python? 通过什么途径学习的Python? 上网收集视频,资料 关注公证号 买教程,书籍 Pyth...
    130920阅读 1,252评论 0 0
  • 创建应用 创建Vue项目选择基础预设,其中包括babel和eslint插件。 文件结构 文件描述public静态资...
    JunChow520阅读 989评论 0 0
  • vue-cli搭建项目 确保安装了node与npm 再目标文件夹下打开终端 执行cnpm i vue-cli -g...
    Akiko_秋子阅读 3,273评论 1 22