Vue.js不可知论的非阻塞通知库

vue通知 (vue-notifications)

VueNotifications - agnostic non-blocking notifications library, that allow you to use notifications in declaration style.

VueNotifications-不可知的非阻塞通知库，可让您以声明样式使用通知。

安装 (Installation)

via npm:

通过npm：

npm i vue-notifications --save

via bower:

通过凉亭：

bower i vue-notifications --save

or download [latest release][1]

或下载[最新版本] [1]

include in project:

包括在项目中：

import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications, options)

设置和配置 (Setup and configuration)

Attention: By default VueNotification send all messages to console. To activate non-blocking notifiction you've got to use third-party library, like toasr. I suggest you to use [mini-toastr][2] (npm i mini-toastr --save)

注意：默认情况下，VueNotification将所有消息发送到console 。 要激活非阻塞通知，您必须使用第三方库，例如toasr。 我建议您使用[mini-toastr] [2]( npm i mini-toastr --save )

// Include Plugin in project
import VueNotifications from 'vue-notifications'

// Include mini-toaster (or any other UI-notification library
import miniToastr from 'mini-toastr'

// If using mini-toastr, provide additional configuration
const toastTypes = {
  success: 'success',
  error: 'error',
  info: 'info',
  warn: 'warn'
}

miniToastr.init({types: toastTypes})

// Here we setup messages output to `mini-toastr`
function toast ({title, message, type, timeout, cb}) {
  return miniToastr[type](message, title, timeout, cb)
}

// Binding for methods .success(), .error() and etc. You can specify and map your own methods here.
// Required to pipe our output to UI library (mini-toastr in example here)
// All not-specified events (types) would be piped to output in console.
const options = {
  success: toast,
  error: toast,
  info: toast,
  warn: toast
}

// Activate plugin
Vue.use(VueNotifications, options)// VueNotifications have auto install but if we want to specify options we've got to do it manually.

// THIS ISN'T REQUIRED IF YOU DON'T USE 'mini-toastr'
// and if you would use "miniToastr" you have to init in in your App.vue
import miniToastr from 'mini-toastr'// don't forget to make "npm i mini-toastr --save"

//in 'ready section
//  ...
    ready () { //'mounted' instade of ready for Vue 2.0
      miniToastr.init()//or "miniToastr.init(miniToastrConfig)" if you want to specify configuration
    },
//  ...

If you want to setup VueNotification's global configuration, you can do it simple:

如果要设置VueNotification的全局配置，则可以简单地进行以下操作：

VueNotifications.config.timeout = 4000
Vue.use(VueNotifications, options)

Also you can use any other word instead of notifications for configs:

您也可以使用其他任何单词代替配置notifications ：

VueNotifications.propertyName = 'messages'
Vue.use(VueNotifications, options)

用法 (Usage)

You've got to specify notifications config:

您必须指定通知配置：

export default {
    name: 'DemoView',
    data () {
      //...
    },
    computed: {
      //...
    },
    methods: {
      //...
    },
    notifications: {
      showLoginError: {
        title: 'Login Failed',
        message: 'Failed to authenticate',
        type: 'error' //Default: 'info', also you can use VueNotifications.type.error instead of 'error'
      }
    },
    vuex: {
      //...
    }
  }

Now you can call this.showLoginError() in any place of this page (i.e. in methods, or whatever).

现在，您可以在此页面的任何位置(例如，在方法或任何其他方法中this.showLoginError()调用this.showLoginError() )。

You also can call .success(), .error() and other methods directly (for example in JavaScript files):

您也可以拨打.success() .error()和其他直接的方法(例如JavaScript文件)：

In some.js:

在some.js ：

import VueNotifications from 'vue-notifications'
  VueNotifications.error({message: 'Some Error'})

覆盖配置。 (Overriding config.)

Even if you have specify config, you can ovverride it in any call simple by sending config object: this.showLoginError({type: 'warn'}). i.e.:

即使您指定了config，也可以通过发送配置对象this.showLoginError({type: 'warn'})在任何调用中简单地对其进行处理。 即：

notifications: {
      showLoginError: {
        message: 'Failed to authenticate',
        type: 'error'
      }
    }

this.showLoginError() //error message
this.showLoginError({type: 'warn'}) //info message

//Also you can send here whatever params. All would be passed down to `mini-toastr` or any other lib.
Keep in mind that configs merging by `Object.assign` (no deep copying).

翻译自: https://vuejsexamples.com/vue-js-agnostic-non-blocking-notifications-library/