Notification 通知

悬浮出现在页面右上角，显示全局的通知提醒消息。

基础用法

适用性广泛的通知栏

所有的通知会在 3000ms 后自动消失， 当然你参考下文的参数来更改具体时间。但我们并没有设置永远不会消失或无法关闭的通知！

<el-button [plain]="true" (click)="handle()">
  尝试
</el-button>
<!--组件中使用: -->
<script type="text">
  import { ElNotificationService } from 'element-angular'
  // ...
  
  constructor(
    private notify: ElNotificationService,
  ) {
  }
  
  // ...
  
  handle(): void {
    this.notify.show('这是一条消息提示')
  }
</script>

带有标题的提示

Notification 可以指定一个标题，这是一个可选参数。

你还可以通过 iconClass 与customClass 来自定义 css 类名，达到定制化的效果。

<el-button [plain]="true" (click)="handle2()">
  尝试
</el-button>
<!--组件中使用: -->
<script type="text">
  // ...
  
  handle2(): void {
    this.notify.show('这是一条消息提示', '消息标题')
  }
</script>

带有倾向性

带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息

服务默认的类型是 info

<el-button [plain]="true" (click)="handle3('success')">成功</el-button>
<el-button [plain]="true" (click)="handle3('warning')">警告</el-button>
<el-button [plain]="true" (click)="handle3('info')">消息</el-button>
<el-button [plain]="true" (click)="handle3('error')">错误</el-button>
<!--组件中使用: -->
<script type="text">
  
  handle3(type: string): void {
    this.notify[type]('这是一条消息提示: ' + type, type)
  }
</script>

引用说明

你只需要在合适的地方加上：

import { ElNotificationService } from 'element-angular'
// ...
constructor(
  private notify: ElNotificationService,
) {
}
// 可以通过 setOptions 来设置更多的选项 (具体参数参见下文)
handle(): void {
  this.notify.setOptions(config: {})
  this.notify.show('一条经过设置的消息')
}

即可使用，无需 在任何地方额外声明 providers依赖。

同时触发多个通知会自动叠加，关闭任何一个通知，其他通知会自动调整高度。

当然，它们也是自动销毁与移除的，你完全不必担心这点。

Notification Attributes