页面同一时间多条提示的问题优化 Notification、Message、element-ui

需求背景： 上面的人反馈页面经常一下报出多条错误提示；要求页面上同一时间只能出现一条提示信息；

实现说明

我们页面的提示信息一般都是两种： Message 和 Notification ；因此改造这两个资源就好了，即使用这两个资源弹提示信息前，先看下页面是否已经存在提示了，如果有就拜拜 不走后面逻辑，如果没有就弹出提示信息；然后项目内哪些地方引入了这两个资源 改为引入改造后的，具体见下方代码；
补充：若你的项目内还存在其他的提示信息资源，请参照Message、Notification一样再添加一套逻辑即可，若有疑问请及时咨询；

实现代码

主逻辑文件

代码位置： src\utils\unifiedTip.js ；可自行作出变动；

/*
 * @Author: chengsl
 * @Date: 2023-04-02 11:21:04
 * @LastEditors: chengsl
 * @LastEditTime: 2023-04-02 14:29:56
 * @Description: 需求描述： 页面同一时间只能出现一个错误提示
 */
import { Notification, Message } from 'element-ui'

let MyMessage = Message
let MyNotification = Notification

window.NOW_ACTIVE_TIP = false // 当前是否有提示框展示

/**
 * 是否有提示框展示
 * @returns {
 *  messageCount
 *  notificationCount
 * }
 */
function hasTip() {
  // let hasMessage  hasNotification
  const tipCount = {
    messageCount: document.querySelectorAll('.el-message').length, // 是否有 Message 类型的提示
    notificationCount: document.querySelectorAll('.el-notification').length // 是否有 Notification 类型的提示
  }
  window.NOW_ACTIVE_TIP = tipCount.messageCount !== 0 || tipCount.notificationCount !== 0
  console.log('👉👉👉进入判断是否有提示的逻辑 -- NOW_ACTIVE_TIP', window.NOW_ACTIVE_TIP)
  return tipCount
}

// Message 类型消息 原始方法
const OldMessage = MyMessage
const OldMessageSuccess = MyMessage['success']
const OldMessageWarning = MyMessage['warning']
const OldMessageInfo = MyMessage['info']
const OldMessageError = MyMessage['error']
// message 默认提示
MyMessage = function(options) {
  hasTip() // 检查是否已有提示
  if (window.NOW_ACTIVE_TIP) return
  else return OldMessage(options)
}
MyMessage['success'] = function(options) {
  hasTip() // 检查是否已有提示
  if (window.NOW_ACTIVE_TIP) return
  else return OldMessageSuccess(options)
}
MyMessage['warning'] = function(options) {
  hasTip() // 检查是否已有提示
  if (window.NOW_ACTIVE_TIP) return
  else return OldMessageWarning(options)
}
MyMessage['info'] = function(options) {
  hasTip() // 检查是否已有提示
  if (window.NOW_ACTIVE_TIP) return
  else return OldMessageInfo(options)
}
MyMessage['error'] = function(options) {
  hasTip() // 检查是否已有提示
  if (window.NOW_ACTIVE_TIP) return
  else return OldMessageError(options)
}

// Notification 类型消息 原始方法
const oldNotification = MyNotification
const OldNotificationSuccess = MyNotification['success']
const OldNotificationWarning = MyNotification['warning']
const OldNotificationInfo = MyNotification['info']
const OldNotificationError = MyNotification['error']
// notification 默认提示
MyNotification = function(options) {
  hasTip() // 检查是否已有提示
  if (window.NOW_ACTIVE_TIP) return
  else return oldNotification(options)
}
MyNotification['success'] = function(options) {
  hasTip() // 检查是否已有提示
  if (window.NOW_ACTIVE_TIP) return
  else return OldNotificationSuccess(options)
}
MyNotification['warning'] = function(options) {
  hasTip() // 检查是否已有提示
  if (window.NOW_ACTIVE_TIP) return
  else return OldNotificationWarning(options)
}
MyNotification['info'] = function(options) {
  hasTip() // 检查是否已有提示
  if (window.NOW_ACTIVE_TIP) return
  else return OldNotificationInfo(options)
}
MyNotification['error'] = function(options) {
  hasTip() // 检查是否已有提示
  if (window.NOW_ACTIVE_TIP) return
  else return OldNotificationError(options)
}

console.log('👉👉👉加载统一提示逻辑 完成')

export default {
  Message: MyMessage,
  Notification: MyNotification
}

其他逻辑

然后请搜索下 项目内哪些地方引入了Notification, Message；

import { Notification, Message } from 'element-ui'

改为

import unifiedTip from '@/utils/unifiedTip'// 全局统一提示
const { Notification, Message } = unifiedTip

自测

找项目内接口调用比较多的页面，看多接口报错后原本提示多条错误信息的，是否变为只提示一条错误信息了；
也可以自行写测试方法，多弹几个信息，看显示几个；

补充

写代码时可以参考下统一认证或电子病历项目；
望写完多找几个场景测几下；
如有其他更好的方案及时交流；
若有问题及时反馈；
GoodLuck；