忘れないように記録しとこ

カバの樹

「vue-toasted」を使ってNotificationを実装する

2019年5月7日

完全版を表示する

はじめに

GW中はVue.jsのライブラリの記事でも書き溜めようと思います。

まず第一弾でNotificationライブラリです。

「vue-toasted」はCDNもあるのでとても便利です。

簡単な実装も１分あればできます。

 

 

環境

Vue.js: 2.6.10

vue-toasted: 1.1.26

 

インストール

以下のnpm、yarn、CDNのどれか一つを使ってインストールします。

 

npm

npm install vue-toasted --save

yarn

yarn add vue-toasted

CDN

<script src="https://unpkg.com/vue-toasted"></script>

 

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

https://github.com/shakee93/vue-toasted

 

導入手順

以下、１分でできる基本機能の実装です。

 

1. Vueプラグインを取り込む

//CDNなら必要なし
import Toasted from 'vue-toasted';

Vue.use(Toasted);

new Vue({
  el: '#app',
  methods: {
    doClick:function(){
      this.$toasted.show('hello billo');
    }
  }
});

CDNを使うならimportの必要はありません。

 

2. ボタンを設置する

<div id="app">
  <button v-on:click="doClick">Show!</button>
</div>

 

サンプル

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

 

オプション

Toastedをcreate時に渡す事ができるオプションです。

実装例

var options = {
  position: 'top-center',
  duration: 2000,
  fullWidth: true,
  type: 'error'
}

Vue.use(Toasted, options);
もしくは
this.$toasted.show('テスト成功！', options);

 

パラメーター 一覧

名 type Default 説明

position

 String 'top-right' containerの位置
['top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left']

duration

Number null 表示時間（ミリ秒）
action Object, Array null 単一または複数の動作を追加する

fullWidth

Boolean false 全幅を有効にする

fitToScreen

Boolean false 全幅で画面にフィット

className

String, Array null toastのカスタムCSSクラス名

containerClass

String, Array null コンテナ用のカスタムCSSクラス
iconPack String 'material' 使用するiconパックの種類
['material', 'fontawesome', 'mdi', 'custom-class', 'callback']
Icon String, Object null 文字列としてのMaterial icon
type String 'default' Toast の種類
['success', 'info', 'error']
theme String 'toasted-primary' テーマ
['toasted-primary', 'outline', 'bubble']
onComplete Function null 完了したときにトリガーする
closeOnSwipe Boolean true ユーザーがスワイプするとToast が閉じます
singleton Boolean false 一度に1つのToast しか許可されていません。

 

サンプル

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

 

Methods

Toastedで利用可能なメソッドです。

 

実装例

this.$toasted.success('テスト成功！');

 

パラメーター 一覧

名 type 説明

show

 message, options default styleを表示

success

 message, options success styleを表示
info message, options info styleを表示

error

 message, options error styleを表示

register

 name, message, options カスタムトーストを登録する

clear

 全てのtoastsをクリアする

 

サンプル

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

 

 

Actions

Toastedに実装できるアクションです。

 

実装例

var options = { 
  action:{ 
    text : 'Cancel', 
    onClick : function(e, toastObject){ 
      toastObject.goAway(0); 
    } 
  } 
}

Vue.use(Toasted, options);
もしくは
this.$toasted.show('テスト成功！', options);

 

パラメーター 一覧

名 type Default 説明
text* String - アクション名
href String null 行動のURL
icon String null action素材の名前
target String null URLのターゲット
class String/Array null アクションのカスタムCSSクラス
push Object null Vue Routerのプッシュパラメータ
onClick Function(e,toastObject) null onClickアクションの機能

 

サンプル

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

 

 

まとめ

Vue.jsのNotification系ライブラリは他にもあるのですが、「vue-toasted」はCDNも用意されているので実装が非常に容易です。

ぜひ試してください。

 

今日はこの辺でー

 

  • B!