一、场景描述
在实际开发过程中,我们都需要对401(身份认证过期)进行处理,并使其跳转登录页。但是我们在身份认证过期时刷新页面,此时所在页面如果存在有多个请求同时发送,那么就会出现一次弹窗多次消息提示的情况,极大的影响用户体验。
二、解决思路
对element message进行二次封装。
三种实现方式:
1、在封装方法中对当前弹窗状态进行记录,如果当前存在弹窗,则调用element message的close方法进行关闭,随后再触发新的弹窗出现。(问题:同一时间段内,较早生成的弹窗在关闭中和新生成的弹窗出现时会造成“闪动效果”)
2、在封装方法中获取message消息弹窗的DOM元素,判断其是否为undefined,如果值不为undefined,则“生成弹窗”,否则不做任何处理。(问题:永远出现的是同一时间内的首个弹窗)。
3、在已有项目中进行优化升级时发现无论是方式一还是方式二,都必须采用this.$message.error/success这种方式调用,和element官网中的使用方式相比缺少了多样化和灵活性,因此在第二中方式的基础上进行升级:使用function定义message主要内容并赋值给某个变量,并为它添加可直接调用的方法。
三、代码实现
方式一:
// message.js
import { Message } from 'element-ui'
let messageStatus = null
export default class ShowMessage {
success (options) {
this.message('success', options)
}
warning (options) {
this.message('warning', options)
}
info (options) {
this.message('info', options)
}
error (options) {
this.message('error', options)
}
message (type, options) {
if (messageStatus) {
messageStatus.close()
}
messageStatus = Message[type](options)
}
}
方式二:
// message.js
import { Message } from 'element-ui'
export default class ShowMessage {
success (options) {
this.message('success', options)
}
warning (options) {
this.message('warning', options)
}
info (options) {
this.message('info', options)
}
error (options) {
this.message('error', options)
}
message (type, options) {
const messageDom = document.getElementsByClassName('el-message')[0]
if (messageDom === undefined) {
Message[type](options)
}
}
}
// main.js
import ShowMessage from '@/config/message';
Vue.prototype.$message = new ShowMessage();
方式三
// message.js
import { Message } from 'element-ui'
const showMessage = function (options) {
const messageDom = document.getElementsByClassName('el-message')[0]
if (messageDom === undefined) {
Message(options)
}
}
const arr = ['success', 'warning', 'info', 'error']
arr.forEach(type => {
showMessage[type] = options => {
const messageDom = document.getElementsByClassName('el-message')[0]
if (messageDom === undefined) {
Message[type](options)
}
};
});
export default showMessage;