Vue.js的简单通知处理程序 - vue-simple-notify

Vue.js的简单通知处理程序 - vue-simple-notify
插件名称 vue-simple-notify
发布时间 2020年10月13日
插件作者 Josantonius

Vue.js应用程序的一个简单,漂亮,干净的通知组件。

安装和下载:

# NPM
$ npm install vue-simple-notify  --save

使用CDN:

<!DOCTYPE html>
<html>

  <head>
    <link href="https://unpkg.com/vue-simple-notify/dist/vue-simple-notify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  </head>

  <body>

    <div id="app">
      <vue-simple-notify :items="[]"></vue-simple-notify>
    </div>
    
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-simple-notify/dist/vue-simple-notify.min.js"></script>

    <script>
      Vue.component('VueSimpleNotify', VueSimpleNotify.VueSimpleNotify)
      new Vue().$mount('#app')
    </script>

  </body>

</html>

添加项目:

<vue-simple-notify
  :items="items"
></vue-simple-notify>
new Vue({
  el: '#app',
  components: { VueSimpleNotify },
  data () {
    return {
      items: [
        {
          message: 'example of error message.'
        },
        {
          type: 'Success',
          color: '#2ecc71',
          dismissable: false,
          message: 'example of success message.'
        }
      ]
    }
  }
})

设置通知之间的延迟:

<vue-simple-notify
  :items="items"
  :delay="delay"
></vue-simple-notify>
new Vue({
  el: '#app',
  components: { VueSimpleNotify },
  data () {
    return {
      items: [{}, {}, {}],
      delay: 1000
    }
  }
})