vue-snotifyを使用したVue.jsの通知

投稿日: 2022-04-20 2022-10-09
タグ: 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>

そこから、注入されたSnotifyの使用を開始できます vm.$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);
    })
  });
}

したがって、基本的に非同期通知には action promiseを返す関数であるプロパティ。その約束が解決されると、非同期通知は成功通知に置き換えられます。拒否された場合は、エラーに置き換えられます。別の通知構成オブジェクトを使用して解決し、カスタム成功通知を表示することもできます。

他の

confirm 、 prompt 、 html 通知など、ユーザーとの対話を可能にする通知タイプは他にもいくつかあります。公式ドキュメントはかなり良い仕事をしているので、ここではそれらについては説明しません。見てください！

ここで利用可能なさまざまなオプションをテストするために利用できる素晴らしい小さな遊び場もあります。楽しみ！

getdocs

13036