Message 消息提示

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

基础用法

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

Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个$message方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。

 1 <template>
 2   <el-button :plain="true" @click="open">打开消息提示</el-button>
 3   <el-button :plain="true" @click="openVn">VNode</el-button>
 4 </template>
 5 
 6 <script>
 7   export default {
 8     methods: {
 9       open() {
10         this.$message('这是一条消息提示');
11       },
12 
13       openVn() {
14         const h = this.$createElement;
15         this.$message({
16           message: h('p', null, [
17             h('span', null, '内容可以是 '),
18             h('i', { style: 'color: teal' }, 'VNode')
19           ])
20         });
21       }
22     }
23   }
24 </script>

View Code