在新版本的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