Vue 訊息通知元件

izitoast 和 vue-notifications

vue-notifications

某輕型無阻塞通知框

包裝了幾種無阻塞通知框，樣式開箱即用，能一分鐘出活

iziToast.js

是一款跨瀏覽器響應式訊息通知外掛。

該訊息通知外掛體積小,使用簡單。訊息顯示時帶CSS3動畫效果,時尚大方。

快速起步

npm i vue-notifications --save
npm i izitoast --save

/在.vue中引入/

<script>
  import Vue from 'vue'
  import VueNotifications from 'vue-notifications'
 

  import iziToast from 'izitoast'
  import 'izitoast/dist/css/iziToast.min.css'
  function toast ({title, message, type, timeout, cb}) {
    if (type === VueNotifications.types.warn) type = 'warning'
    return iziToast[type]({title, message, timeout})
  }
  var options = {
    success: toast,
    error:
 
 toast,
    info: toast,
    warn: toast
  }
  Vue.use(VueNotifications, options)
  export default {
    methods:{
      doit(){
        var arr = [
          {title: '警告', message: '綠巨人和雷神即將開戰！'
            , type: 'warn', timeout: 10000},
          {title: '成功', message: '歐陽峰已經完成九陽神功第一層修煉，張無忌老師表示很滿意'
            ,
 
 type: 'success', timeout: 10000},
          {title: '錯誤', message: '林平之忍著劇痛翻開《葵花寶典》第二頁，上書“若不自宮，也能成功”'
            , type: 'error', timeout: 10000},
          {title: '資訊', message: '林超英撩漢指數再創新低，王重陽表示出家向道'
            , type: 'info', timeout: 10000},
        ]
        var t = arr[Math.floor(Math.random() * 4)]
        this.showLoginError(t)
      }
    },
    notifications: {
      showLoginError: {
        title: 'Login Failed',
        message: 'Failed to authenticate',
        type: 'error' // You also can use 'VueNotifications.types.error' instead of 'error'
      }
    }
  }    
</script>

實際效果