Notice-Message消息提示

忘是亡心i 2022-03-22 04:10 303阅读 0赞

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

当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置`type`字段可以定义不同的状态，默认为`info`。此时正文内容以`message`的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入`type`字段的情况下像`open4`那样直接调用。

![20190125194633781.png][]

<el-button :plain="true" @click="open2">成功</el-button>
      <el-button :plain="true" @click="open3">警告</el-button>
      <el-button :plain="true" @click="open">消息</el-button>
      <el-button :plain="true" @click="open4">错误</el-button>
    <script>
      export default {
        methods: {
          open() {
            this.$message('这是一条消息提示');
          },
          open2() {
            this.$message({
              message: '恭喜你，这是一条成功消息',
              type: 'success'
            });
          },
    
          open3() {
            this.$message({
              message: '警告哦，这是一条警告消息',
              type: 'warning'
            });
          },
    
          open4() {
            this.$message.error('错了哦，这是一条错误消息');
          }
        }
      }
    </script>

### Options ###

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>message</td> 
   <td>消息文字</td> 
   <td>string / VNode</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>主题</td> 
   <td>string</td> 
   <td>success/warning/info/error</td> 
   <td>info</td> 
  </tr> 
 </tbody> 
</table>

[20190125194633781.png]: /images/20220322/1b4721399fce4752a0245ed2d0a301c4.png