让页面信息提示不再拘泥于模态框和toast

2023-11-28 10:55:03

在需要对用户进行提示时，有时会遇到这种场景：使用模态框提示太过硬核，使用toast提示又太轻了，这时候可以选择使用页面顶部滑下的消息提示。本文仿照element-ui的实现一个类似$message的方法。

首先我们来看下element-ui中消息提示的效果是怎么样的，找些思路。Element-ui中提供三种类型的提示：纯文本提示 、HTML内容提示 和带图标的提示 。提示的内容体被定位到页面顶部并会逐渐向下滑出，当鼠标划过或者用户与提示体交互的时候，提示体不会消失。当提示体滑至页面底端的时候，自动消失。

Element-ui中提示的效果总体上来说还是非常好的，但是在实际项目中使用，依然存在一些问题。

样式可定制性差 。Element-ui的提示组件提供了许多内建样式，比如提示的类型、背景颜色、文本颜色等，但是这些样式对于某些需求来说还是不够灵活，比如有时候我们需要修改提示的字体、大小、行高等。
不支持自定义定位 。Element-ui中的提示组件只支持在页面顶部显示，有时候我们需要在页面其他位置显示提示信息，比如在表格的某一行或者某个字段上。
不方便调用 。Element-ui中的提示组件是一个完整的Vue组件，我们需要在Vue组件中通过this.$message()来调用，这使得在其他项目中使用起来不是那么方便。

基于上述问题，我决定自己实现一个简易的$message方法，这个方法能够实现和Element-ui中类似的消息提示，但是更加灵活和方便使用。

具体实现

实现这个方法的关键在于创建一个div元素并将其添加到文档中，然后使用CSS来控制它的样式和行为。以下是如何实现它的步骤：

创建一个div元素并将其添加到文档中。
将div元素的position属性设置为fixed，并将其定位到页面顶部。
将div元素的width属性设置为100%，并将其left和right属性设置为0。
将div元素的padding属性设置为20px，并将其background-color属性设置为#333。
将div元素的color属性设置为#fff，并将其font-size属性设置为16px。
将div元素的text-align属性设置为center，并将其z-index属性设置为9999。
将以下CSS代码添加到您的项目中：

.message {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background-color: #333;
  color: #fff;
  font-size: 16px;
  text-align: center;
  z-index: 9999;
}

.message-enter {
  opacity: 0;
  transform: translateY(-100%);
}

.message-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: all 300ms ease-in-out;
}

.message-leave {
  opacity: 1;
  transform: translateY(0);
}

.message-leave-active {
  opacity: 0;
  transform: translateY(-100%);
  transition: all 300ms ease-in-out;
}

创建一个JavaScript函数来显示消息。该函数将接受一个消息文本作为参数，并将创建一个新的div元素并将其添加到文档中。
在您的代码中调用该函数来显示消息。

以下是该函数的示例实现：

function message(text) {
  const div = document.createElement('div');
  div.classList.add('message');
  div.textContent = text;

  document.body.appendChild(div);

  setTimeout(() => {
    div.classList.add('message-leave');

    setTimeout(() => {
      document.body.removeChild(div);
    }, 300);
  }, 3000);
}