element ui message弹窗数量限制_vue element message 同时显示多个

element ui message弹窗的个数限制

参考资料

https://www.jianshu.com/p/da13467f69c0

https://gitee.com/chensanjin/fast-tortoise

代码

查看ElementUI Message的源码，根据实际需求自定义了Message功能。

场景描述

• 场景一：限制页面同时展示消息提示语的最大数量（优先展示后插入的提示语）
• 场景二：根据不同情况可以优先显示新/旧消息提示语
• 场景三：如果超出了最大显示数量，则剩余的消息以队列的显示依次展示

实现方案

场景一

• 功能描述
  • 根据设置的最大数量，如果存储的实例列表instances长度超出最大限制数则销毁之前的消息实例instance（调用Message方法创建消息提示语会返回当前消息的一个实例），否则保存新建实例instance到实例列表instances中
  • 如果消息提示语消失，需要从实例列表instances中移除当前实例instance，确保页面显示消息数量与instances列表长度统一
• 代码实现
  新建ZMessage构造函数

  import { Message } from 'element-ui'
  function ZMessage (options) {
      if (!(this instanceof ZMessage)) {
          return new ZMessage(options)
      }
      this.init(options)
  }
  1
  2
  3
  4
  5
  6
  7

  静态配置项和实例列表

  ZMessage.config = {
    max: 0, // 最大显示数
  }
  ZMessage.instances = [] // 消息体实例列表
  1
  2
  3
  4

  定义创建消息和监听实例消失事件方法

  ZMessage.prototype.setMessage = function (options) {
    const instance = Message(options)
    // 监听消息消失事件，从实例列表移除当前消息实例
    instance.$watch('visible', val => {
      ZMessage.instances = ZMessage.instances.filter(item => item !== instance)
    })
    ZMessage.instances.push(instance)
  }
  1
  2
  3
  4
  5
  6
  7
  8

  定义移除消息实例方法

  ZMessage.prototype.prototype.removeMessages = function () {
    const {
      instances,
      config: { max }
    } = ZMessage
    ZMessage.instances = instances.filter((instance, index) => {
      if (index < instances.length - max + 1) {
        instance && instance.close()
        return false
      }
      return true
    })
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13

  初始化消息

  ZMessage.prototype.init = function (options) {
    const { max } = ZMessage.config
    // 判断如果超出最大消息数时，删除消息
    if (max > 0 && ZMessage.instances.length >= max) {
      this.removeMessages() :
    }
    if (ZMessage.instances.length < max || !max) {
      this.setMessage(options)
    }
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

场景二

• 功能描述
  • 在场景一的基础上新增优先取消息还是旧消息的标志操作
• 代码实现
  静态配置项和实例列表

  ZMessage.config = {
    max: 0, // 最大显示数
    showNewest: true // 是否后添加的消息覆盖前面的消息
  }
  1
  2
  3
  4

  初始化

  ZMessage.prototype.init = function (options) {
    const { max, showNewest } = ZMessage.config
    // 判断如果超出最大消息数时，删除消息
    if (max > 0 && ZMessage.instances.length >= max && showNewest) {
      this.removeMessages()
    }
    if (ZMessage.instances.length < max || !max) {
      this.setMessage(options)
    }
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

场景三

• 功能描述
  • 在场景一场景二基础上添加是否使用队列方式存储未展示消息的实例，如果超出了最大限制数则创建消息实例的容器存储到消息队列queue中
  • 监听是否有消息消失，如果有则从消息队列queue中取出第一个容器，创建消息实例
• 代码实现
  静态配置项和消息容器队列

  ZMessage.config = {
    max: 0, // 最大显示数
    showNewest: true, // 是否后添加的消息覆盖前面的消息
    isQueue: false // 是否以队列形式存储为展示消息
  }
  ZMessage.queue = [] // 未展示数据的消息容器队列
  1
  2
  3
  4
  5
  6

  生成队列

  // 生成队列元素，延迟执行
  ZMessage.prototype.saveToQueue = function (options) {
    return () => {
      this.setMessage(options)
    }
  }
  1
  2
  3
  4
  5
  6

  初始化

  // 初始化
  ZMessage.prototype.init = function (options) {
    const { max, isQueue, showNewest } = ZMessage.config
    // 判断如果超出最大消息数时，删除消息
    if (max > 0 && ZMessage.instances.length >= max && showNewest && !isQueue) {
      this.removeMessages()
    }
    if (ZMessage.instances.length >= max && isQueue) {
      // 添加队列元素
      ZMessage.queue.push(this.saveToQueue(options))
    } else if (ZMessage.instances.length < max || !max) {
      this.setMessage(options)
    }
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14

  获取消息实例和添加事件监听

  // 获取消息实例和添加事件监听
  ZMessage.prototype.setMessage = function (options) {
    const instance = Message(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)
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12

最后一步

添加不同消息类型功能静态方法

const messageTypes = ['success', 'warning', 'error', 'info']
// 各消息类型静态方法
messageTypes.forEach(type => {
  ZMessage[type] = options => {
    let opts = options
    if (typeof options === 'string') {
      opts = {
        message: options
      }
    }
    return new ZMessage({ ...opts, type })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13

完整代码

// resetMessage.js
import { Message } from 'element-ui'
const messageTypes = ['success', 'warning', 'error', 'info']
function ZMessage (options) {
  if (!(this instanceof ZMessage)) {
    return new ZMessage({...options,duration:1000,showClose:true})
  }
  this.init({...options,duration:1000,showClose:true})
}

ZMessage.queue = [] // 未展示数据的消息队列
ZMessage.instances = [] // 消息体实例列表
// 配置项
ZMessage.config = {
  max: 0, // 最大显示数
  isQueue: false, // 是否以队列形式存储为展示消息
  showNewest: true, // 是否后添加的消息覆盖前面的消息
  showClose: true, // 是否出现x关闭按钮
  dangerouslyUseHTMLString: true, // 是否将 message 属性作为 HTML 片段处理
  duration: 1000, // 延迟时间
}
// 配置参数
ZMessage.setConfig = function (config = {}) {
  ZMessage.config = { ...ZMessage.config, ...config }
}
ZMessage.close = Message.close
ZMessage.closeAll = Message.closeAll
// 各消息类型静态方法
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 = Message(options)
  // 监听消息消失事件，从实例列表移除当前消息实例
  instance.$watch('visible', val => {
    ZMessage.instances = ZMessage.instances.filter( item => item !== instance)
    if (ZMessage.config.isQueue && ZMessage.queue.length) {
       ZMessage.queue.shift()()
    }
  })
  await ZMessage.instances.push(instance)
}
// 生成队列元素，延迟执行
ZMessage.prototype.saveToQueue =  function (options) {
  return (async() => {
    await this.setMessage(options)
  })
}

export default ZMessage



// 使用方式
import ZMessage from '@/utils/resetMessage.js'
// 自定义配置项
ZMessage.setConfig({ max: 1, isQueue: false, showNewest: true })
// 当重要消息时, 可在调用时传入 overall 属性, 该消息会清空所有消息站, 作为优先级第一的消息发出, Demo 如下
this.$message({
    message: '恭喜你，这是一条成功消息',
    type: 'success',
    overall: true
});
// 覆盖默认$message
Vue.prototype.$message = ZMessage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108