目次
はじめに
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も用意されているので実装が非常に容易です。
ぜひ試してください。
今日はこの辺でー
