Message 全局提示

全局展示操作反馈信息。

何时使用#

  • 可提供成功、警告和错误等反馈信息。
  • 顶部居中显示并自动消失,是一种不打断用户操作的轻量级提示方式。

API#

  • message.success(content, duration)
  • message.error(content, duration)
  • message.info(content, duration)
  • message.loading(content, duration)

组件提供了三个静态方法,参数如下:

参数 说明 类型 默认值
content 提示内容 React.Element or String
duration 自动关闭的延时 number 1.5

还提供了一个全局配置方法:

  • message.config(options)
message.config({
  top: 100
});
参数 说明 类型 默认值
top 消息距离顶部的位置 Number 24px

代码演示

import { message, Button } from 'antd';

const info = function() {
  message.info('这是一条普通的提醒');
};

ReactDOM.render(<Button type="primary" onClick={info}>显示普通提醒</Button>
, mountNode);

信息提醒反馈。

import { message, Button } from 'antd';

const success = function() {
  message.success('这是一条成功的提示,并将于10秒后消失', 10);
};

ReactDOM.render(<Button onClick={success}>自定义时长提示</Button>
, mountNode);

自定义时长 10s,默认时长为 1.5s

import { message, Button } from 'antd';

const success = function() {
  message.success('这是一条成功提示');
};

const error = function() {
  message.error('这是一条报错提示');
};

const warn = function() {
  message.warn('这是一条警告提示');
};

ReactDOM.render(<div>
  <Button onClick={success}>显示成功提示</Button>
  <Button onClick={error}>显示报错提示</Button>
  <Button onClick={warn}>显示警告提示</Button>
</div>, mountNode);

包括成功、失败、警告。

import { message, Button } from 'antd';

const success = function() {
  let hide = message.loading('正在执行中...', 0);
  // 异步手动移除
  setTimeout(hide, 2500);
};

ReactDOM.render(<Button onClick={success}>显示加载中...</Button>
, mountNode);

进行全局 loading,异步自行移除。