Notification 通知

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

基础用法

适用性广泛的通知栏

可自动关闭（默认带关闭按钮）
可自动关闭
不会自动关闭
接受一个 options 字面量参数，在最简单的情况下，你可以设置 title 字段和 message 字段，用于设置通知标题和正文内容。 默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置 duration，可以控制关闭的时间间隔，特别的是，如果设置为 0，则不会自动关闭。 注意：duration 接收一个 Number，单位为毫秒，默认为 4500。 
<template>
  <vm-button :plain="true" @click="open">可自动关闭</vm-button>
  <vm-button :plain="true" @click="open2">不会自动关闭</vm-button>
</template>

<script>
  export default {
    methods: {
      open () {
        this.$notify({
          title: '标题名称',
          message: this.$createElement('i', { style: 'color: teal' }, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
        });
      },
      open2 () {
        this.$notify({
          title: '提示',
          message: '这是一条不会自动关闭的消息',
          duration: 0
        });
      }
    }
  }
</script>

带有倾向性

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

成功
警告
消息
错误
Notification 组件有四种通知类型：success，warning，info，error。比如，通过 type 字段来设置，除此之外的值将被忽略。 此时正文内容以 message 的值传入。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入 type 字段的情况下像 open5 和 open6 那样直接调用。 
<template>
  <vm-button :plain="true" type="success" @click="open3">成功</vm-button>
  <vm-button :plain="true" type="warning" @click="open4">警告</vm-button>
  <vm-button :plain="true" type="info" @click="open5">消息</vm-button>
  <vm-button :plain="true" type="danger" @click="open6">错误</vm-button>
</template>

<script>
  export default {
    methods: {
      open3 () {
        this.$notify({
          title: '成功',
          message: '这是一条成功的提示消息',
          type: 'success'
        });
      },

      open4 () {
        this.$notify({
          title: '警告',
          message: '这是一条警告的提示消息',
          type: 'warning'
        });
      },

      open5 () {
        this.$notify.info({
          title: '消息',
          message: '这是一条消息的提示消息'
        });
      },

      open6 () {
        this.$notify.error({
          title: '错误',
          message: '这是一条错误的提示消息'
        });
      }
    }
  }
</script>

带有偏移

让 Notification 偏移一些位置。

同一偏移的消息
自身偏移的消息
Notification 提供设置偏移量的功能，通过设置 offset 字段，可以使弹出的消息距屏幕顶部偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量，当然可以通过设置 sameOffset字段为 false 来进行改变。 
<template>
  <vm-button :plain="true" @click="open7">偏移的消息</vm-button>
</template>

<script >
  export default {
    methods: {
     open7 () {
        this.$notify.success({
          title: '成功',
          message: '这是一条成功的提示消息',
          offset: 100
        });
      }
    }
  }
</script>

全局方法

你可以在导入 Notification 组件之后， 为 Vue.prototype 添加了全局方法 $notify。因此在 vue instance 中可以采用本页面中的方式调用 Notification。 

import Notification from 'vue-multiple-notification'
  • this.$notify(options)
  • this.$notify.info(options)
  • this.$notify.success(options)
  • this.$notify.warning(options)
  • this.$notify.error(options)
  • this.$notify.closeAll()

单独引用

单独引入 Notification： 

import Vue from 'vue'
import Notification from 'vue-multiple-notification'
Vue.prototype.$notify = Notification
此时调用方法为 Notification(options)。我们也为每个 type 定义了各自的方法，如 Notification.success(options)。 并且可以调用 Notification.closeAll() 手动关闭所有实例。
  • Notification(options)
  • Notification.info(options)
  • Notification.success(options)
  • Notification.warning(options)
  • Notification.error(options)
  • Notification.closeAll()

Options

参数 说明 类型 可选值 默认值
zIndex （新增） 层级 number — 2000
title 标题 string — —
message 说明文字 string / VNode — —
type 主题样式，如果不在可选值内将被忽略 string success/warning/info/error —
iconClass 自定义图标的类名。若设置了 type，则 iconClass 会被覆盖 string — —
customClass 自定义类名 string — —
duration 显示时间, 毫秒。设为 0 则不会自动关闭 number — 4500
showClose 是否显示关闭按钮 boolean — true
onClose 关闭时的回调函数, 参数为被关闭的 notification 实例 function — —
onClick 点击 Notification 时的回调函数, 参数为被关闭的 notification 实例 function — —
offset 偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个自身的偏移量 number — 0
sameOffset （新增） 所有的 Notification 实例是否应当具有一个相同的偏移量 boolean — false

方法

调用 Notification 或 this.$notify 会返回当前 Notification 的实例。 如果需要手动关闭实例，可以调用它的 close 方法。

方法名 说明
close 关闭当前的 Notification

全局配置 （新增特性）

调用 Notification.config(options) 来进行全局配置。 

Notification.config({
  duration: 3000,
  zIndex: 2000
})
参数 说明 类型 可选值 默认值
duration 显示时间, 毫秒。设为 0 则不会自动关闭，优先级低于局部配置 number — —
zIndex 层级，优先级低于局部配置 number — —

示例使用详情请参考：（https://github.com/savoygu/vue-demonstration）