如何巧妙解决element弹出多个message消息提示的问题

2024-01-14 01:25:20

在新版本的element中，官方对 message消息提示做了修改，修改成一个请求对应一个提示语，这就会导致多条消息提示共存的一个问题，而很多情况下，这多条消息提示的内容是一样的，从用户的体验来说，这并不是一个好的体验。

为了解决这个问题，我们可以使用以下两种方法：

合并相同的message提示

我们可以使用JavaScript代码来合并相同的内容。代码如下：

// 获取所有的message提示元素
const messageList = document.querySelectorAll('.el-message');

// 遍历所有message提示元素
for (let i = 0; i < messageList.length; i++) {
  const message = messageList[i];

  // 获取message提示元素的内容
  const messageContent = message.querySelector('.el-message__content');

  // 如果内容为空，则跳过
  if (!messageContent) {
    continue;
  }

  // 获取message提示元素的内容文本
  const messageText = messageContent.textContent;

  // 判断是否已经存在相同的内容
  let isExist = false;
  for (let j = 0; j < messageList.length; j++) {
    const otherMessage = messageList[j];

    // 如果内容相同，则合并
    if (otherMessage !== message && otherMessage.querySelector('.el-message__content').textContent === messageText) {
      isExist = true;
      otherMessage.remove();
      break;
    }
  }

  // 如果不存在相同的内容，则显示
  if (!isExist) {
    message.style.display = 'block';
  }
}