让ElementUI Message消息提示每次只弹出一次

最新推荐文章于 2024-07-03 10:10:20 发布

Carla卡拉伊

最新推荐文章于 2024-07-03 10:10:20 发布

阅读量6.5k

点赞数 1

分类专栏：整理文章标签： vue

本文链接：https://blog.csdn.net/weixin_45484574/article/details/108357701

版权

本文讲述了在Vue项目中使用ElementUI的Message组件进行消息提示时，如何避免因数据为空导致的多个弹框问题。通过在main.js中设置代码，实现了只显示最后一个消息提示，但作者期望实现数据依次弹出的功能，以提高用户体验。目前此需求尚未找到理想解决方案。

摘要由CSDN通过智能技术生成

官方效果图在这里插入图片描述
遇到的情况是，一进入页面，为空的数据要message消息提示没有该数据，如果很多数据为空，就会如上图弹一整个页面的弹框，用户体验就不是很好。

我目前的解决方案是：
在main.js文件写入以下代码：

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

// 为了实现Class的私有属性
const showMessage = Symbol('showMessage')
/** 
 *  重写ElementUI的Message
 *  single默认值true，因为项目需求，默认只弹出一个，可以根据实际需要设置
 */
let messageInstance = null;
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)
  }
  [showMes