Notification UI Components vue.js ライブラリ

トーストウィジェットを「vue-easy-toast」で実装する

トーストウィジェットを「vue-easy-toast」で実装する

vue-easy-toastとは

vue-easy-toastは、トーストウィジェットを実装できるコンポーネントライブラリです。

特に目立ったクセも無く、苦労せずに実装することが可能です。

 

トーストウィジェットを「vue-easy-toast」で実装する

 

環境

Vue 2.6.10
vue-easy-toast 1.0.5

 

インストール

以下のnpmCDNを使ってインストールします。

npm

npm install vue-easy-toast --save

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-easy-toast.min.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/noru/vue-easy-toast

 

導入手順

1. ライブラリの取り込み

(1)webpack等の場合 [注意]モジュール版は未検証です。

import Toast from 'vue-easy-toast'

(2)WEBページの場合

const Toast = window['vue-easy-toast'].default;

2.メソッドを設定

上記で取得したToastVue.use に取り込みます。

Vue.toastでトーストウィジェットが起動します。
ボタンクリック時に起動してほしいので、doToaste メソッドを準備します。

new Vue({
  el: '#app',
  data: {
    text: 'テキストはこんな感じで表示されます。',
    horizontalPosition: 'left',
    verticalPosition: 'top',
    transition: 'fade',
    duration: 1000,
    mode: 'queue'
  },
  methods: {
    doToaste: function(){
      Vue.toast(this.text, {
        id: 'my-toast',
        className: ['my-toast', 'toast-warning'],
        horizontalPosition: this.horizontalPosition,
        verticalPosition: this.verticalPosition,
        duration: this.duration,
        mode: this.mode,
        transition: this.transition
      });
    }
  }
});

3. テンプレートを準備

トースト起動用のボタンを準備します。

上記で作成したdoToaste メソッドをボタンのクリックイベントに設定します。

<div id="app">
  <button class="start" @click="doToaste()">起動</button>
</div>

 

サンプル

>>専用ページで確認する

 

オプション

オプションの設定で、トーストのアニメーションや表示時間を設定することが可能です。

設定例

Vue.toast('Hi, there!', {
  id: 'my-toast',
  parent: '#toast-container',
  className: ['my-toast', 'toast-warning'],
  horizontalPosition: 'right',
  verticalPosition: 'top',
  duration: 3000,
  mode: 'queue',
  transition: 'my-transition'
})

>>専用ページで確認する

 

オプション一覧

Parameter Type Default Description
id string easy-toast-default グローバルに一意の識別子。これを使用して、異なるセットアップで複数のトーストを作成します。
parent string body コンテナーのセレクター(TODO、まだ準備ができていない、位置がウィンドウに固定されている
className stringarray パススルーする自己定義のクラス名。3つの定義されたクラスがあります:et-infoet-warnet-alert、異なる背景色で表示します。
horizontalPosition string right トーストの水平位置。3つの定義済みの位置があります:leftrightおよびcenter
verticalPosition string top トーストの垂直位置。2つの定義された位置があります。topbottom
duration number 5000 1トーストの持続時間(ミリ秒)
mode string override overrideまたはqueueoverrideの場合、最後のトーストは、前のトーストを強制的にフラッシュします。
closeable boolean false trueまたはfalse。の場合true、トーストを手動で閉じることができます。
transition string fade 組み込みの遷移:fadeslide-[up/down/left/right]

 

さいごに

トーストウィジェットを実装できるコンポーネントライブラリでした。

 

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

-Notification, UI Components, vue.js, ライブラリ
-, , ,