问题如图所示:
预期解决效果: 每次只弹出一个。
解决办法: 重写 $message
直接上代码
// resetMessage.js
/*
* 重写this.$message, 防止连续点击多次弹窗
* 调用样例: this.$message.info('xxx')
* */
import {Message} from 'element-ui';
const showMessage = Symbol('showMessage');
class DonMessage {
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) {
// 判断是否已存在Message
if (document.getElementsByClassName('el-message').length === 0) {
// 修改参数
if(type === 'error' || type === 'warning'){
options = {
message: options,
duration: 3500,
showClose: true
};
} else {
options = {
message: options,
duration: 2000,
showClose: true
};
}
Message[type](options)
}
} else {
options = {
message: options,
duration: 2000,
showClose: true
};
Message[type](options)
}
}
}
export const newMessage = new DonMessage();
重写后在main.js 中覆盖:
//main.js
import {newMessage} from '@/assets/js/resetMessage.js';
// 重写$message
Vue.prototype.$message = newMessage;
调用样例:
this.$message.success('操作成功');
结果: 重写后可完美解决此问题。