---
title: Message 全局提示 (doing)
order: 15
group: 
  path: /components
nav: 
  title: 组件
  path: /components
---

## TODO
message 提示的内容，表示动作已经发生，`撤销` 的意义是什么？

## 使用
全局展示操作反馈信息。可提供成功、警告和错误等反馈信息。
顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示。对于重要操作提供撤销功能。

### 使用原则
+ 高度固定，修改文字内容时宽度会自动适配。最小宽度为160px，超过160px时，根据间距自动适配。
+ 提示2秒后消失；可撤销提示用于重要内容的删除，6秒内可撤销。

### 基本使用

提供了五种基本提示：`success`、`error`、`info`、`warning`、`loading`。
```jsx
import React from 'react';
import { Button, message } from 'baas-ui';

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

const error = () => {
  message.error('这是一条失败提示');
};

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

const info = () => {
  message.info('这是一条指南信息');
};

const loading = () => {
  message.loading('全局加载');
};

export default () => (
  <div style={{ display: 'flex' }}>
    <div style={{ flex: '1' }}>
      <Button onClick={success}>Success</Button>
    </div>
    <div style={{ flex: '1' }}><Button onClick={error}>Error</Button></div>
    <div style={{ flex: '1' }}><Button onClick={info}>Info</Button></div>
    <div style={{ flex: '1' }}><Button onClick={warning}>Warning</Button></div>
    <div style={{ flex: '1' }}><Button onClick={loading}>Loading</Button></div>
  </div>
);
```

### Promise 接口
在每个 message 将要结束时通过 then 显示新的 message。
```jsx
import React from 'react';
import { Button, message } from 'baas-ui';

const success = () => {
  message
    .loading('内容加载中', 2.5)
    .then(() => message.success('恭喜！加载完成', 2.5));
};

export default () => <Button onClick={success}>Promise</Button>;
```