解决element 弹出多个message消息提示 问题

       在新版本的element中,官方对  message消息提示 做了修改,修改成一个请求对应一个提示语,这就会导致一个多条消息提示共存的一个问题,而很多情况下,这多条消息提示的内容是一样的,从用户的体验来说,并不友好

我们可以通过 重写 message 来解决这个问题

首先 先写一个resetMessage.js

import {

    Message

} from 'element-ui';

const showMessage = Symbol('showMessage');

let messageItem = null;

class ResetMessage {

    [showMessage](type, options, only) {

        if (messageItem && only) {

            messageItem.close()

        }

        messageItem = Message[type](options)

    }

    success(options, only = true) {

        this[showMessage]('success', options, only)

    }

    error(options, only = true) {

        this[showMessage]('error', options, only)

    }

    warning(options, only = true) {

        this[showMessage]('warning', options, only)

    }

    info(options, only = true) {

        this[showMessage]('info', options, only)

    }

}

export const message = new ResetMessage();


第二步,在 main.js 中引入

import {

    message

  } from './assets/js/resetMessage';

Vue.prototype.$message = message; //重写message提示框

 这样就解决了 ,多条消息提示共存的问题,页面中始终只会存在一个消息提示


原文链接:https://blog.csdn.net/weixin_40297452/article/details/102968785

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容