# 全局提示 Message

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/message
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

由用户的操作触发的轻量级全局反馈。

## 安装

```bash
npm install @arco-design/web-react@2.66.18
```

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基础用法**：最简单的例子。
- **不同类型**：全局提示有 5 种不同的类型，分别为：`info`, `success`, `warning`, `error`, `normal`。
- **更新全局提醒内容**：通过指定 `id`，可以更新已经存在的全局提示。
- **全局提示的位置**：全局提示有 2 种不同的弹出位置，分别为顶部和底部。
- **更新延时**：通过指定 `id`，可以更新已经存在的全局提示的`duration` 属性。
- **手动控制关闭**：`Message.xxx()` 会返回一个函数，调用此函数能手动关闭通知。
- **显示关闭按钮**：设置 `closable` 来显示关闭按钮。
- **Hooks-用法**：可以通过 `useMessage`**(2.40.0)** 去创建可以读取 context 的对话框。 但是通过 `useMessage` 渲染的 `message` 挂载在 `contextHolder` 所在位置。无法通过 `getContainer()` 修改容器。
- **自定义动画效果**：可以通过 `transitionClassNames` 和 `transitionTimeout` 实现自定义过渡效果 动画实现基于 [react-transition-group](https://reactcommunity.org/react-transition-group/css-transition)

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API

### Message

|参数名|描述|类型|默认值|版本|
|---|---|---|---|---|
|closable|是否显示关闭按钮|boolean |`true`|-|
|showIcon|是否显示图标|boolean |`true`|-|
|duration|自动关闭的时间，单位为 `ms`|number |`3000`|-|
|id|当前消息的唯一标识，可以用来更新消息|string |`-`|-|
|transitionClassNames|消息弹出动画的类名，见 react-transition-group 的 `classNames`|string |`-`|-|
|position|消息的位置，分为 `top` 上方和 `bottom` 下方|'top' \| 'bottom' |`-`|-|
|closeIcon|自定义右上角关闭按钮|ReactNode |`-`|2.50.0|
|icon|自定义图标|ReactNode |`-`|-|
|className|节点类名|string \| string[] |`-`|-|
|content|消息内容|ReactNode \| string  **(必填)**|`-`|-|
|style|节点样式|CSSProperties |`-`|-|
|transitionTimeout|动画持续时间，见 react-transition-group 的 `timeout`|{enter?: number;exit?: number;} |`{enter: 100, exit: 300}`|2.43.0|
|onClose|关闭时的回调|() => void |`-`|-|

### 使用方法

- `Message.info(content: String)` / `Message.info(config: Object)`
- `Message.success(content: String)` / `Message.success(config: Object)`
- `Message.warning(content: String)` / `Message.warning(config: Object)`
- `Message.error(content: String)` / `Message.error(config: Object)`
- `Message.normal(content: String)` / `Message.normal(config: Object)`
- `Message.loading(content: String)` / `Message.loading(config: Object)`
- `Message.clear()`

### 全局设置

`Message.config(options)`

|参数名|描述|类型|默认值|
|---|:---:|:---:|---:|
|maxCount|最大通知数量|`number`|`-`|
|getContainer|放置通知的容器|`() => HTMLElement`|`() => document.body`|
|duration|通知自动关闭的时间|`number`|`3000`|
|prefixCls|类名前缀|`string`|`arco`|

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt