JavaScript 实现全局消息提示

前言

在之前的项目中，我使用了 Ant Design 组件库进行开发，并对其中的 message 全局提示功能印象深刻。为了进一步了解它的实现原理，我花了一些时间进行研究。Message 提示支持五种类型：success（成功）、error（错误）、info（信息）、warning（警告）和 loading（加载）。

1. 引入依赖

首先，需要在项目中引入 Ant Design 的 message 模块：

import { message } from 'antd';

2. 基本使用

使用 message 的最简单方式是直接调用 message.X(content)，其中 X 是提示类型，content 是提示内容。例如，要显示一条成功提示，可以这样写：

message.success('操作成功！');

3. 选项

message 接受几个选项来定制提示：

• duration：提示持续时间（以毫秒为单位）
• onClose：提示关闭时触发的回调函数
• top：提示距离页面顶部的位置
• style：提示的内联样式

例如，要显示一条持续 5 秒的成功提示，可以在顶部显示，可以这样写：

message.success('操作成功！', 5, {
  top: 100,
  style: {
    backgroundColor: 'green',
    color: 'white',
  },
});

4. 自定义组件

如果内置的提示样式不满足要求，还可以自定义 message 组件。具体步骤如下：

• 创建一个新的 React 组件
• 在组件中使用 useMessage 钩子来访问 message API
• 根据需要自定义提示的外观和行为

1. 队列

如果需要同时显示多个提示，可以使用 message.config({ maxCount: n }) 设置提示队列的最大数量。当达到最大数量时，新提示会自动替换旧提示。

2. 自动关闭

默认情况下，提示会在指定的时间后自动关闭。如果需要手动关闭提示，可以使用 message.close()。

3. 类型别配置

message 允许为每种提示类型配置默认选项。例如，要为所有警告提示设置持续时间为 10 秒，可以这样写：

message.config({
  warn: {
    duration: 10,
  },
});

Ant Design 的 message 模块提供了一种简单而强大的方式，可以在 JavaScript 应用中显示全局消息提示。通过灵活的选项和可定制的组件，它可以满足各种需求。