Vue-snotifyを使用したVue.jsの通知
私が書くすべてのアプリに実装することをいつも恐れていることがいくつかあります。 モーダルダイアログ(モバイルではうまくいきません)と乾杯/通知/アラート/何でも。 ネイティブのモバイル/デスクトッププッシュ通知ではなく、比較的簡単です。 トーストの難しさは、表示と非表示の優れたアニメーションを維持しながら、複数の通知、進行中のアクション、さまざまなスタイル、さまざまなタイプのコンテンツを処理するのに十分な柔軟性のあるシステムを構築することです。 それらをインタラクティブにしたい場合はさらに悪いです。 vue-snotify
は、シンプルなAPIと見栄えの良い通知を使用して、これらのユースケースのほとんどを処理します。
インストール
vue-snotifyをVue.jsプロジェクトにインストールします。
# Yarn $ yarn add vue-snotify # NPM $ npm install vue-snotify --save
使用法
次に、メインのVueセットアップファイルでプラグインを有効にします。
main.js
import Vue from 'vue'; import App from './App.vue'; import Snotify from 'vue-snotify'; // You also need to import the styles. If you're using webpack's css-loader, you can do so here: import 'vue-snotify/styles/material.css'; // or dark.css or simple.css Vue.use(Snotify); new Vue({ el: '#app', render: h => h(App) });
次に、メインのアプリ要素のどこかにvue-snotify
コンポーネントを追加します。 これは、通知がレンダリングされる場所です。
App.vue
<template> <div id="app"> <!-- Your app stuff here --> <vue-snotify></vue-snotify> </div> </template>
そこから、挿入されたvm.$snotify
オブジェクトでSnotifyの使用を開始できます。 ここにいくつかの例がありますが、それを使ってできるたくさんがあります。
すべての通知は、これらのプロパティで構成できます。
単純
かなり退屈な古い伝統的な古典的な通常の(私はここで言葉が不足しています)通知。
... export default { methods: { displayNotification() { this.$snotify.simple({ body: 'My Notification Body' title: 'Notification Title', config: {} }); } } }
成功/情報/警告/エラー
これらはすべて、それぞれの色で簡単な通知を表示します。
成功
... export default { methods: { displayNotification() { this.$snotify.success({ body: 'Success Body' title: 'Success Title', config: {} }); } } }
エラー
... export default { methods: { displayNotification() { this.$snotify.error({ body: 'Error Body' title: 'Error Title', config: {} }); } } }
警告
... export default { methods: { displayNotification() { this.$snotify.warning({ body: 'Warning Body' title: 'Warning Title', config: {} }); } } }
情報
... export default { methods: { displayNotification() { this.$snotify.info({ body: 'Info Body' title: 'Info Title', config: {} }); } } }
非同期通知
Snotifyには非同期通知用のシステムが組み込まれていますが、理解するのは少し難しいかもしれません。 これが例です。
... displayNotification() { this.$snotify.async({ body: 'Working on a thing...' title: 'Working', config: {}, action: () => new Promise((resolve, reject) => { // Do async stuff here. setTimeout(() => { resolve(); // Success /* reject(); // Error // Custom replacement. resolve({ body: 'Custom Success', config: {} }) */ }, 2000); }) }); }
したがって、基本的に非同期通知には、promiseを返す関数であるaction
プロパティが必要です。 その約束が解決されると、非同期通知は成功通知に置き換えられます。 拒否された場合は、エラーに置き換えられます。 別の通知構成オブジェクトを使用して解決し、カスタム成功通知を表示することもできます。
他の
confirm 、 prompt 、 html 通知など、ユーザーとの対話を可能にする通知タイプは他にもいくつかあります。 公式ドキュメントはかなり良い仕事をしているので、ここではそれらについては説明しません。 見てください!
ここで利用可能なさまざまなオプションをテストするために利用できる素晴らしい小さな遊び場もあります。 楽しみ!