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

前言

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

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

解决方案

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

单个Message

el-message

多个Message

el-message-2

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

实现代码如下:

// 通常都是在main.js中处理

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

// ...

// 为了实现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)
    }
  }
}

// ... 

Vue.use(ElementUI)
// 命名根据需要,DonMessage只是在文章中使用
Vue.prototype.$message = new DonMessage()

2019-09-11更新:因为有问道这一块,更新一下调用方式。

调用方式

因为使用了new DonMessage()的原因,所以导致this.$message(options)的方式无法使用。所以推荐使用this.$message.success('成功提示')或者this.$message.success(options)的方式进行调用。具体参数可以查看官方文档。


DON的前端分享
前端开发,也了解一些后端的开发。分享个人项目和开发经验。
906 声望
42 粉丝
0 条评论
推荐阅读
单文件组件下的vue,可以擦出怎样的火花
与时俱进吧,看着 vue3 和 vite,虽然不会用,但还是心痒痒,然后就把原先基于 vue@2 的实现做了重构。不周之处,大家见谅!下面关于过期的内容,我就用删除线标记了。

leftstick64阅读 45.1k评论 18

Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...

款冬27阅读 13.3k评论 7

给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...

熊的猫19阅读 2.5k

封面图
一个开源vue网站博客,nuxt开源网站,前后端分离项目
开媛笔记,基于nuxt ssr首屏服务器端渲染 。用于分享、记录、交流和学习,希望可以帮助到小伙伴们。同时网站在不断更新,创造属于猿(媛)的世界 -$Bao Yalong ..Let's Go! [链接]

jigsaw16阅读 8.4k评论 3

你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!

熊的猫14阅读 1.7k

封面图
2022 你还不会微前端吗 (上) — 从巨石应用到微应用
微前端系列分为 上/下 两篇,本文为 上篇 主要还是了解微前端的由来、概念、作用等,以及基于已有的微前端框架进行实践,并了解微前端的核心功能所在,而在下篇 2022 你还不会微前端吗 (下) — 揭秘微前端核心原理...

熊的猫14阅读 1.6k

封面图
嘿,vue中keep-alive有个「大坑」你可能还不知道
背景是这样的,我们使用vue2开发一个在线客服使用的IM应用,基本布局是左边是访客列表,右边是访客对话,为了让对话加载更友好,我们将对话的路由使用<keep-alive>缓存起来。但是如果将所有对话都缓存,未...

wuwhs9阅读 1.6k

封面图
906 声望
42 粉丝
宣传栏