ReactJS UI Ant 设计消息组件

ReactJS UI Ant 是一个基于 ReactJS 的 UI 组件库，包含了许多常用的组件。其中，消息组件可以用于在页面中展示各类提示信息。下面介绍如何使用消息组件。

安装

使用 npm 进行安装：

npm install antd

安装完成后，可以在项目中引入组件：

import {message} from 'antd';

使用

使用方法非常简单，只需调用 message 方法即可。例如，要显示一个成功的提示：

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

其它常用的方法包括：

message.error('操作失败');
message.warning('请注意');
message.info('更多信息');

可以自定义信息显示时长：

message.success('操作成功', 3);

此时，消息将会显示 3 秒钟。

还可以使用 Promise 的方式进行消息显示，这种方式能够保证消息完全被显示出来后才执行 Promise 的 resolve 逻辑：

message
  .loading('正在处理...', 2.5)
  .then(() => message.success('操作成功', 2))
  .catch(() => message.error('操作失败'));

风格

消息组件的风格可以通过全局配置进行修改，例如：

import { message } from 'antd';

message.config({
  top: 100,
  duration: 2,
  maxCount: 3,
});

其中，top 属性表示消息距离页面顶部的位置，duration 表示消息显示时长，maxCount 表示同时显示的消息数。

如果需要修改组件样式，可以使用 CSS 文件进行覆盖。在 AntD 的官方文档中，提供了一个覆盖样式的示例：

/* 修改 message 的样式 */
.ant-message {
  text-align: left;
}

.ant-message-notice-content {
  display: flex;
  align-items: center;
}

/* 修改 message 的图标 */
.anticon-check-circle {
  color: #52c41a;
}

.anticon-info-circle {
  color: #1890ff;
}

.anticon-close-circle {
  color: #ff4d4f;
}

.anticon-exclamation-circle {
  color: #faad14;
}

.anticon-loading {
  svg {
    color: #1890ff;
  }
}

总结

AntD 提供了功能完备的消息组件，使用起来非常方便。在实际项目中，如果需要更多样式以及更复杂的功能，可以参考 AntD 的官方文档进行自定义。