vuex flash
1.0.0
vuex内のvue.jsのフラッシュメッセージコンポーネント
$ npm install --save vuex-flash
登録コンポーネント：
//main.js
import Vue from 'vue' ;
import VuexFlash from 'vuex-flash' ;
Vue . use ( VuexFlash ) ;登録Vuexストア：
//store.js
import { createFlashStore } from 'vuex-flash' ;
const store = new Vuex . Store ( {
// ...
plugins : [
createFlashStore ( )
]
} ) ;global mixinを使用します単にオプションを入れてmixin: trueコンポーネントを登録しているときに、 this.flashメソッドはすべてのコンポーネントで平均することができます
Vue . use ( VuexFlash , { mixin : true } ) ;次に、他のコンポーネントで：
this . flash ( { message : 'some message' , variant : 'success' } ) ;
this . $router . push ( '/somepage' ) ; //redirect to /somepageメソッド名を変更できます。
Vue . use ( VuexFlash , { mixin : true , method : 'flashMe' } ) ;
//now
this . flashMe ( { message : 'some message' , variant : 'success' } ) ; mutationを使用しますグローバルミックスの代わりに、コンポーネントから突然変異をコミットしてフラッシュメッセージを設定できます。
methods: {
//...
someMethod ( ) {
//..
this . $store . commit ( 'FLASH/SET_FLASH' , { message : 'some message' , variant : 'success' } ) ;
}
} mapMutations方法で：
methods: {
//...
someMethod ( ) {
//..
this . flash ( { message : 'some message' , variant : 'success' } ) ;
} ,
... mapMutations ( {
flash : 'FLASH/SET_FLASH'
} )
}デフォルトの突然変異タイプはFLASH/SET_FLASHであることに注意してください。オプションで構成できます。
//in somepage component
< template >
< flash-message variant = "success" > </ flash-message >
//......
</ template > this . flash ( { message : 'some success message' , variant : 'success' } ) ;
this . flash ( { message : 'some warning message' , variant : 'warning' } ) ;
this . flash ( { message : 'some danger message' , variant : 'danger' } ) ;
this . $router . push ( '/somepage' ) ; //redirect to /somepage //in somepage
< flash-message variant = "success" > </ flash-message >
< flash - message variant = "danger" > < / flash-message >
< flash-message variant = "warning" > </ flash-message >| 名前 | タイプ | デフォルト | 降ろされた |
|---|---|---|---|
| 変異体 | 弦 | - | requiredプロップ。フラッシュバリアントタイプ |
| 重要 | ブール | 間違い | 本当なら、フラッシュアラートの密接なオプションはありません |
| 自動hide | ブール | 間違い | Auto Hide Flashアラート |
| TransitionName | 弦 | カスタムクラス - トランジション | Vue Transitions name Prop |
| Transitionin | 弦 | 「アニメーション化されたフェードダウン」 | VUE遷移のためのスペースが分離された文字列enter-active-class小道具 |
| トランジションアウト | 弦 | 「アニメーションフェードアウトアップ」 | Vue TransitionのためのSpace Separted String leave-active-class |
Vuex-Flashは、Bootstrap V4アラートコンポーネントをデフォルトのアラートとして使用します。ヘッドタグにブートストラップCSSファイルを追加する必要があります。
< link rel =" stylesheet " href =" https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css " integrity =" sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ " crossorigin =" anonymous " >カスタムテンプレートを使用して、いつでも独自のアラートを使用できます。
デフォルトのバリアントタイプは次のとおりです。
カスタムバリアントを追加できます。
vuex-flashはamimate.cssをデフォルトの遷移効果として使用します。ヘッドタグにCSSファイルを追加する必要があります
< link rel =" stylesheet " href =" https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css " >複数のフラッシュメッセージでtransitionInおよびtransitionOutプロップを使用して、異なるアニメーションスタイルを設定できます。
< flash-message variant = "success" transitionIn = "animated bounceIn" transitionOut = "animated bounceOut" > </ flash-message >
< flash - message variant = "danger" transitionIn = "animated flipInX" transitionOut = "animated flipOutX" > < / flash-message >カスタムテンプレートを使用することを選択した場合は、必要に応じてこの機能を自分で追加する必要があります。
{{ message }}テンプレート内に置きます。v-if="show"を使用してアラートを表示します。cssClasses文字列データは、オプションで提供するvariant classやcustom classesを含むすべてのクラスになります。バインドクラス:class="cssClasses"closeFlashメソッドを使用して、closeボタンクリックをトリガーします。Vue.use(VuexFlash, [options]);コンポーネントプラグインを構成するには、次のオプションを利用できます。
name [String] - コンポーネント名。 (default: 'FlashMessage')
mixin [Boolean] -trueの場合、Global Method Mixinがフラッシュデータの設定に登録します。 (default: false)
method [String] - mixinがtrueに設定され、このオプションが指定されている場合、この名前でグローバルミックスメソッドが登録されます。 (default: 'flash')
namespace - [String] - 名前空間は、Vuexフラッシュモジュールの作成に使用される名前です。これは、 createFlashStoreネームスペースと同じである必要があります。突然変異をコミットするために使用されるこの名前空間は、フラッシュデータを設定およびクリアします。提供されている場合、突然変異型は'{namespace}/SET_FLASH'になります。 (default: 'FLASH')
duration [Number] - フラッシュメッセージフラッシュのフラッシュメッセージは（ミリ秒単位）表示されます。 (default: 3000)
template [String] - アラートを表示するテンプレート。カスタムテンプレートを参照してください。
keep [Boolean] - falseとデータが保存されている場合、ストレージは毎回アラートを表示した後にクリアされます。提供されれば、ストレージはnull値を保持します。 (default: true)
storage [Storage] - データが持続するストレージ。 keepがfalseに設定されている場合、データはこのストレージからクリアされます。 (default: sessionStorage)
key [String] - キーは、データを持続するためにストアによって使用されます。 (default: '__vuexFlash')
css [Array] - カスタムCSSクラス名の配列。これは、カスタムテンプレートを作成するときに非常に便利です。 (default: [])
variantClass [Function] - 関数は、CSSクラス名を現在のバリアントに基づいてスタイリングアラートコンポーネントに戻します。 .Variant this.variant使用して現在のバリアントにアクセスできます。矢印機能を使用しないでください。
(default: function(){ return `alert-${this.variant}`; })
clearPersisted [Function] - keepがfalseに設定された場合、ストレージから持続データのクリアのクリアに使用される関数。 this.storage使用してストレージにアクセスできます。矢印機能を使用しないでください。
(default: function(){ this.storage.removeItem(this.key); })
createFlashStore([options])Vuexストアプラグインを構成するために、次のオプションを利用できます。
namespace [String] - この名前空間は、Vuex -Flashストアモジュールの登録に使用される名前です。 (default: 'FLASH')
setter [String] -これはFlash Message Setterのmutation nameです'${namespace}/${setter}' (default: 'SET_FLASH')
variants [Array] - 状態として使用するカスタムバリアントの配列。デフォルトのバリアントとマージされます。 (default: [])
mit
