如何让Element UI的Message消息提示每次只弹出一个

系统管理员 2021-08-13 14:54 1721阅读 0赞

Element UI的`Message`消息提示是点击一次触发一次的。在开发的时候经常会作为一些校验提示，但是公司的测试人员在进行测试时会一直点，然后就会出现如下图的情况。虽然客户使用的时候一般来说不会出现这种情况（毕竟客户不会闲着没事一直点点点，而且就算出现了也只是不太好看，对功能什么的都没什么影响），但既然测试提出来了那还是要解决的。

![弹出消息列表][format_png]

最开始查了下Element UI的官方文档，发现确实没提供只弹出一次的功能。其他的如`MessageBox`和`Notification`都不太符合要求，**更重要的是`Message`已在项目中大量存在，如果不能在全局解决的话，修改成本实在是太高昂了** 。

## 解决方案 ##

通过对`Message`分析可以得知：Element UI在调用`Message`组件时会在HTML中插入以下代码，所以我们可以通过**`document.getElementsByClassName('el-message').length > 0`**来判断当前页面是否已存在`Message`。

多个Message

![el-message-2][]

import ElementUI, { Message } from 'element-ui'
    // ... 
    
    Vue.use(ElementUI)
    // 命名根据需要，DonMessage只是在文章中使用
    Vue.prototype.$message = new DonMessage()
    
    // ...
    
    // 为了实现Class的私有属性
    const showMessage = Symbol('showMessage')
    /** 
     *  重写ElementUI的Message
     *  single默认值true，因为项目需求，默认只弹出一个，可以根据实际需要设置
     */
    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) {
            Message[type](options)
          }
        } else {
          Message[type](options)
        }
      }
    }

同时，因为我们常常会把`Message`作为全局方法来使用，所以我们要修改`Vue.prototype.$message`。

目前改成了 **document.getElementsByClassName('el-notification').length === 0**

[format_png]: /images/20210813/86d358b2b76340d1a9f37d4637a017bf.png
[el-message-2]: /images/20210813/53b4e3676d5c4fed98e377b990242064.png