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

组件演示

var message = antd.message;

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

React.render(<button className="ant-btn ant-btn-primary" onClick={success}>显示成功提示</button>
, document.getElementById('components-message-demo-success'));

成功

操作成功反馈。


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

React.render(<button className="ant-btn ant-btn-primary" onClick={info}>显示普通提醒</button>
, document.getElementById('components-message-demo-info'));

普通提示

信息提醒反馈。

var message = antd.message;

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

React.render(<button className="ant-btn" onClick={success}>显示加载中...</button>
, document.getElementById('components-message-demo-loading'));

加载中

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


var message = antd.message;
var error = function() {
  message.error('这是一条失败的提示这是一条失败的提示这是一条失败的提示');
};

React.render(<button className="ant-btn ant-btn-primary" onClick={error}>显示失败提示</button>
, document.getElementById('components-message-demo-error'));

错误或失败

操作失败反馈。


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

React.render(<button className="ant-btn ant-btn-primary" onClick={success}>自定义时长提示</button>
, document.getElementById('components-message-demo-duration'));

修改延时

自定义时长 10s，默认时长为 1.5s。