VUE使用element的Notification 通知固定通知数量(超出的数量存储或者删除)

需求

总所周知，element的Notification消息通知如果一直有消息来就会一直弹框，一直到浏览器填满。现在有个需求，固定弹框的数量达到固定数量后每×掉一个就继续弹框填充。写的组件不仅可以满足超出数量后存储起来还可以删除老消息以及将新消息优先级第一。

方案

resetMessage.js中

import { Notification } from 'element-ui'
const messageTypes = ['success', 'warning', 'error', 'info']

function ZMessage (options) {
  if (!(this instanceof ZMessage)) {
    return new ZMessage({...options,duration:0,showClose:true})
  }
  this.init({...options,duration:0,showClose:true})
}

ZMessage.queue = [] // 未展示数据的消息队列
ZMessage.instances = [] // 消息体实例列表
// 配置项
ZMessage.config = {
  max: 0, // 最大显示数
  isQueue: true, // 是否以队列形式存储为展示消息
  showNewest: false, // 是否后添加的消息覆盖前面的消息
  showClose: true, // 是否出现x关闭按钮
  dangerouslyUseHTMLString: true, // 是否将 message 属性作为 HTML 片段处理
  duration: 0, // 延迟时间
}

// 配置参数
ZMessage.setConfig = function (config = {}) {
  ZMessage.config = { ...ZMessage.config, ...config }
}

// 各消息类型静态方法
messageTypes.forEach(type => {
  ZMessage[type] = options => {
    let opts = options
    if (typeof options === 'string') {
      opts = {
        message: options
      }
    }
    return new ZMessage({ ...opts, type })
  }
})
// 初始化
ZMessage.prototype.init = async function (options) {
  const { max, isQueue, showNewest } = ZMessage.config
  // 判断如果超出最大消息数时，删除消息
  if (max > 0 && ZMessage.instances.length >= max && showNewest && !isQueue) {
    this.removeMessages()
  }
   // 传入了覆盖全部属性,  关闭全部消息
   if (options.overall) {
     ZMessage.closeAll()
     // 清空所有队列消息
     ZMessage.queue = []
   }
  if (ZMessage.instances.length >= max && isQueue) {
    // 添加队列元素
    ZMessage.queue.push(this.saveToQueue(options))
  } else if (ZMessage.instances.length < max || !max) {
    await this.setMessage(options)
  }
}

// 移除消息
ZMessage.prototype.removeMessages =  function () {
  const {
    instances,
    config: { max }
  } = ZMessage
  ZMessage.instances = instances.filter(async(instance, index) => {
    if (index < instances.length - max + 1) {
      await instance &&  instance.close()
      return false
    }
    return true
  })
}
// 获取消息实例和添加事件监听
ZMessage.prototype.setMessage = async function (options) {
  const instance = Notification(options)
  // 监听消息消失事件，从实例列表移除当前消息实例
  instance.$watch('visible', val => {
    //去除展示队列中被叉掉的消息
    ZMessage.instances = ZMessage.instances.filter( item => item !== instance)
    //如果是队列模式并且队列不为空，则取出一个消息展示
    if (ZMessage.config.isQueue && ZMessage.queue.length) {
      ZMessage.queue.shift()()
    }
  })
  //添加到展示消息队列
  ZMessage.instances.push(instance)
}
// 生成队列元素，延迟执行
ZMessage.prototype.saveToQueue =  function (options) {
  return (async() => {
    await this.setMessage(options)
  })
}

export default ZMessage

JS中调用：如果是vue中使用将Vue.prototype替换为this就行。如果不需要存储isQueue就改成false。

//引入resetMessage
import ZMessage  from "@/api/scada/resetMessage";

//除了组件中预制的配置，还可以自行添加
ZMessage.setConfig(({ max: 4, isQueue: true }));

// 当重要消息时, 可在调用时传入 overall 属性, 该消息会清空所有消息站
Vue.prototype.$notify({
  title: '我是notify'
  message: '我是Message',
  // overall: true
});

//ZMessage替代element的$notify
Vue.prototype.$notify = ZMessage

参考大神的文章(本人使用了没问题)

element ui message弹窗数量限制_elementplus elmessage 为啥连续提示最多只能提示三个-CSDN博客