vue中接口报错信息多次提示问题

最近项目遇到问题——报错信息过多提示,如下图所示:
在这里插入图片描述
找了半天原因(从封装的请求拦截—封装的请求接口方法一层层找问题),突然发现是使用Elementui中的message弹框问题,解决方法如下:

重写message

  • 新建js文件(文件具体位置自己放,我放在assets/scripts下面)

    我的文件名是resetMessage.js

    
    import {Message} from 'element-ui';
    let messageInstance = null;
    const resetMessage = (options) => {
        if(messageInstance) {
            messageInstance.close()
        }
        messageInstance = 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
    
  • main.js中引入上面文件

    import { message } from '@/assets/scripts/resetMessage'
    Vue.prototype.$message = message;
    

使用

this.$message.error('具体信息内容');
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值