message

@sinoui/message

全局提示信息。

依赖安装

 
yarn add @sinoui/message

入门示例

 
import React from 'react';
import message from '@sinoui/message';
​
function Demo() {
  const handleClick = () => {
    message.info('这是一条提示消息');
  };
​
  return <Button onClick={handleClick}>显示消息</Button>;
}

不同类型的消息提示

长时间显示 loading 提示

loading一般用于资源加载中提示，加载完成才会消失。此时我们只需要在使用message.loading()时，指定第二个参数为 0 即可保证loading提示不会自动关闭。但在加载完成后一定要调用hide()让其关闭。具体示例如下：

 
import message from '@sinoui/message';
​
function save() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('保存成功');
    }, 1000);
  });
}
​
function Demo() {
  const handleClick = () => {
    const hide = message.loading('数据正在提交，请稍后...', 0);
    save()
      .then(() => {
        hide();
        message.success('保存成功');
      })
      .catch((error) => {
        hide();
        message.error('保存失败');
      });
  };
​
  return <Button onClick={handleClick}>保存</Button>;
}

设置消息显示时长

message相关提示 API 支持自定义显示时长，默认为 3000 毫秒。

设置消息显示最大条数

消息显示最大条数默认为 10 条，可以使用message.config()自定义最大条数。

消息替换

可以使用 key 值替换消息。具体用法类似于：

 
import message from '@sinoui/message';
​
function save() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('保存成功');
    }, 1000);
  });
}
​
function Demo() {
  const handleClick = () => {
    message.loading('数据正在提交，请稍后...', { key: '001', duration: 0 });
    save()
      .then(() => {
        message.success('保存成功', { key: '001' });
      })
      .catch((error) => {
        message.error('保存失败', { key: '001' });
      });
  };
​
  return <Button onClick={handleClick}>保存</Button>;
}

主题切换

使用message.setTheme(theme)的方式切换主题。

API

组件提供了一些静态方法，使用方式和参数可参考如下：

message.info(content,config)
message.success(content,config)
message.error(content,config)
message.warning(content,config)
message.loading(content,config)

参数解析：

参数名称	参数类型	说明
content	React.ReactNode	消息内容
config	number\|{key:string,duration:number}	消息配置。如果是`number`类型表示消息显示时长，以`ms`为单位；当值为`0`时，表示消息不会自动消失。也可以是消息配置，包括`key`值和显示时长。

全局配置 API

除了上述提到的几个静态方法外，message还有两个设置全局配置的 API：

message.config({max,duration}) 全局设置默认的最大消息条数和显示时长
message.setTheme(theme) 全局设置主题