Message 全局提示

全局展示操作反馈信息。
使用
源码 components/message
文档 编辑此页

何时使用#

  • 可提供成功、警告和错误等反馈信息。
  • 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。

代码演示#

普通提示

信息提醒反馈。

      加载中
修改延时

自定义时长 10s，默认时长为 3s。

      加载中
结束事件

可通过订阅 onClose 事件在 message 关闭时做出某些操作。以上用例将依次打开三个 message。

      加载中
自定义样式

使用 nzStyle 和 nzClass 来定义样式。

      加载中
20.4.0
其他提示类型

包括成功、失败、警告。

      加载中
加载中

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

      加载中
自定义模板

您可以为消息内容创建自定义模板。 通过 nzData 选项，您可以传递一些可选的数据给此自定义模板。

      加载中

API#

NzMessageService#

组件提供了一些服务方法，使用方式和参数如下：

  • NzMessageService.success(content, [options])
  • NzMessageService.error(content, [options])
  • NzMessageService.info(content, [options])
  • NzMessageService.warning(content, [options])
  • NzMessageService.loading(content, [options])
参数说明类型默认值
content提示内容string | TemplateRef<void>-
options支持设置针对当前提示框的参数，见下方表格object-

options 支持设置的参数如下：

参数说明类型版本
nzDuration持续时间(毫秒)，当设置为0时不消失number
nzPauseOnHover鼠标移上时禁止自动移除boolean
nzAnimate开关动画效果boolean
nzData传递给自定义模板的数据NzSafeAny
nzStyle自定义内联样式NgStyleInterface | string20.4.0
nzClass自定义 CSS classNgClassInterface | string20.4.0

还提供了全局销毁方法：

  • NzMessageService.remove(id): 移除特定id的消息，当id为空时，移除所有消息（该消息id通过上述方法返回值中得到）

全局配置#

可以通过 NzConfigService 进行全局配置，详情请见文档中 全局配置项 章节。

参数说明类型默认值
nzDuration持续时间(毫秒)，当设置为 0 时不消失number3000
nzMaxStack同一时间可展示的最大提示数量number7
nzPauseOnHover鼠标移上时禁止自动移除booleantrue
nzAnimate开关动画效果booleantrue
nzTop消息距离顶部的位置number | string24
nzDirection消息文字方向'ltr' | 'rtl'-

NzMessageRef#

当你调用 NzMessageService.success 或其他方法时会返回该对象。

export interface NzMessageRef {
  messageId: string;
  onClose: Subject<false>; // 当 message 关闭时它会派发一个事件
}