Notice-Notification通知

亦凉 2022-03-22 04:10 282阅读 0赞

<div id="app">
      <el-button
        plain
        @click="open">
        可自动关闭
      </el-button>
      <el-button
        plain
        @click="open2">
        不会自动关闭
      </el-button>
    </div>
    <script>
      /*
      * Notification 组件提供通知功能，Element 注册了$notify方法，接收一个options字面量参数，在最简单的情况下，你可以设置
    title字段和message字段，用于设置通知的标题和正文。
      * 默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置duration，可以控制关闭的时间间隔，特别的是，如果
    设置为0，则不会自动关闭。注意：duration接收一个Number，单位为毫秒，默认为4500。
      * */
      new Vue({
        el: '#app',
        methods: {
          open() {
            const h = this.$createElement;
            console.log(h)
    
            this.$notify({
              title: '标题名称',
              message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
            });
          },
    
          open2() {
            this.$notify({
              title: '提示',
              message: '这是一条不会自动关闭的消息',
              duration: 0
            });
          }
        }
    
      })
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70][]

### 全局方法 ###

Element 为 `Vue.prototype` 添加了全局方法 `$notify`。因此在 vue instance 中可以采用本页面中的方式调用 Notification。

### Options ###

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>title</td> 
   <td>标题</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>message</td> 
   <td>说明文字</td> 
   <td>string/Vue.VNode</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>主题样式，如果不在可选值内将被忽略</td> 
   <td>string</td> 
   <td>success/warning/info/error</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>duration</td> 
   <td>显示时间, 毫秒。设为 0 则不会自动关闭</td> 
   <td>number</td> 
   <td>—</td> 
   <td>4500</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70]: /images/20220322/ea1d66c7d8424241bf6a71061fcbbab3.png