Message 消息提示

常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。

基础用法

从顶部出现，3 秒后自动消失。

ElMessageService 仅仅是一个服务， 不需要在模板中注册任何组件插槽，它会创建一个虚拟组件用于显示，并且在合适的时候注销。你完全不用担心模板与生命周期的问题。

<!--你可以从 [element-angular] 中引入 ElMessageService 并注入到自己的组件中-->
<!--使用 messageService.show('msg') 来触发一个提示-->
<el-button (click)="handle()">show</el-button>
<!--组件中使用: -->
<script type="text">
  import { ElMessageService } from 'element-angular'
  // ...
  
  constructor(
    private message: ElMessageService,
  ) {
  }
  
  // ...
  
  handle(): void {
    this.message.show('这是一条消息提示')
  }
</script>

不同状态

用来显示「成功、警告、消息、错误」类的操作反馈。

服务默认的类型是 info

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

可关闭

可以添加关闭按钮。

service.setOptions 接受一个对象，用于更全面的设置提示消息，具体参数可见页面下方的文档。

<el-button [plain]="true" (click)="handle2('success')">成功(可关闭)</el-button>
<el-button [plain]="true" (click)="handle2('error')">错误(可关闭)</el-button>
<!--组件中使用: -->
<script type="text">
  
  handle2(type: string): void {
    this.message.setOptions({ showClose: true })
    this.message[type]('这是一条可关闭的消息提示')
  }
</script>

居中

import { ElMessageService } from 'element-angular'
// ...
constructor(
  private message: ElMessageService,
) {
}

引用说明

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

<el-button [plain]="true" (click)="center()">居中</el-button>
<!--组件中使用: -->
<script type="text">
  
  handle(type: string): void {
    this.message[type]('这是一条消息提示: ' + type)
  }
</script>

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

同时触发多个消息提示会自动往上叠加，每个消息是相互独立的，同时它们在结束时都会自动销毁。

Message Attributes