全局提示 Message
由用户的操作触发的轻量级全局反馈。
安装
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
示例来自 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 |