Message全局提示

    • 可提供成功、警告和错误等反馈信息。

    • 顶部居中显示并自动消失,是一种不打断用户操作的轻量级提示方式。

    普通提示

    信息提醒反馈。

    Message全局提示 - 图2

    自定义时长 ,默认时长为 3s

    1. import { message, Button } from 'antd';
    2. const success = () => {
    3. message.success('This is a prompt message for success, and it will disappear in 10 seconds', 10);
    4. };
    5. ReactDOM.render(<Button onClick={success}>Customized display duration</Button>, mountNode);

    可以通过 then 接口在关闭后运行 callback 。以上用例将在每个 message 将要结束时通过 then 显示新的 message 。

    Message全局提示 - 图4

    其他提示类型

    包括成功、失败、警告。

    1. import { message, Button } from 'antd';
    2. message.success('This is a success message');
    3. };
    4. const error = () => {
    5. };
    6. const warning = () => {
    7. message.warning('This is a warning message');
    8. };
    9. ReactDOM.render(
    10. <div>
    11. <Button onClick={success}>Success</Button>
    12. <Button onClick={error}>Error</Button>
    13. <Button onClick={warning}>Warning</Button>
    14. mountNode,
    15. );

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

    组件提供了一些静态方法,使用方式和参数如下:

    • message.success(content, [duration], onClose)

    • message.info(content, [duration], onClose)

    • message.warning(content, [duration], onClose)

    • message.warn(content, [duration], onClose) // alias of warning

    • message.loading(content, [duration], onClose)

    组件同时提供 promise 接口。

    • messagelevel.then(afterClose)

    • message.then(afterClose)

    其中message[level] 是组件已经提供的静态方法。then 接口返回值是 Promise。

    • message.open(config)

    还提供了全局配置和全局销毁方法:

    • message.destroy()

    message.config

    1. message.config({
    2. top: 100,
    3. duration: 2,