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

最近项目遇到问题——报错信息过多提示,如下图所示:
vue中接口报错信息多次提示问题_第1张图片
找了半天原因(从封装的请求拦截—封装的请求接口方法一层层找问题),突然发现是使用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('具体信息内容');

你可能感兴趣的:(前端——vue,vue,信息提示弹框)