乐趣区

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

前言

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

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

解决方案

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

单个 Message

多个 Message

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

实现代码如下:

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)
    }
  }
}
退出移动版