vuex flash

Vuex Blitz

Flash -Nachrichtenkomponente für Vue.js innerhalb von Vuex

Merkmale

• Mehrfachblitz
• benutzerdefinierte Vorlage
• Blitzdaten im Speicher -Speicher
• hoch anpassbar

Demo & Beispiel

Live -Demo mit Code -Snippet

Installieren

 $ npm install --save vuex-flash

Verwendung

Komponente registrieren:

 //main.js

import Vue from 'vue' ;
import VuexFlash from 'vuex-flash' ;

Vue . use ( VuexFlash ) ;

Registrieren Sie Vuex Store:

 //store.js

import { createFlashStore } from 'vuex-flash' ;

const store = new Vuex . Store ( {
  // ...
  plugins : [
    createFlashStore ( )
  ]
} ) ;

Flash -Daten

Verwenden von global mixin

Setzen Sie einfach eine Option mixin: true bei der Registrierung von Komponenten this.flash

 Vue . use ( VuexFlash , { mixin : true } ) ;

Dann in anderen Komponenten:

 this . flash ( { message : 'some message' , variant : 'success' } ) ;
this . $router . push ( '/somepage' ) ; //redirect to /somepage

Sie können den Methodennamen ändern:

 Vue . use ( VuexFlash , { mixin : true , method : 'flashMe' } ) ;
//now
this . flashMe ( { message : 'some message' , variant : 'success' } ) ; 

Über globales Mixin

Unter Verwendung von mutation

Anstelle von Global Mixin können Sie Mutation von Komponenten begehen, um die Flash -Nachricht festzulegen:

methods: {
  //...
  someMethod ( ) {
    //..
    this . $store . commit ( 'FLASH/SET_FLASH' , { message : 'some message' , variant : 'success' } ) ;
  }
}

In mapMutations Way:

methods: {
  //...
  someMethod ( ) {
    //..
    this . flash ( { message : 'some message' , variant : 'success' } ) ;
  } ,

  ... mapMutations ( {
    flash : 'FLASH/SET_FLASH'
  } )
}

Beachten Sie, dass der Standardmutationstyp FLASH/SET_FLASH ist. Sie können es in Optionen konfigurieren.

Flash anzeigen

 //in somepage component

< template >
  < flash-message variant = "success" > </ flash-message >
  //......
</ template >

Mehrfachblitz

 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 >

Requisiten

Name	Typ	Standard	Entfernung
Variante	Saite	- -	required Prop.Der Flash -Variante -Typ
wichtig	Boolean	FALSCH	Wenn wahr, wird es keine enge Option von Flash Alert haben
AutoHide	Boolean	FALSCH	Automatische Flash -Warnung automatisch ausblenden
Übergangsname	Saite	Custom-Klassenübergang	Vue -Übergänge name Requisiten mehr
Übergang	Saite	"Animated Fadeindown"	Space Separtad String für VUE-Übergänge enter-active-class Requisiten mehr
Übergang	Saite	"Animated Fadeoutup"	Space Separtad String für VUE-Übergänge leave-active-class Requisiten mehr

Flash -Alarmstil

Vuex-Flash verwendet die Bootstrap V4-Alarmkomponente als Standard-Alarm.

 < 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 " >

Sie können immer Ihre eigene Warnung über benutzerdefinierte Vorlage verwenden.

Variante

Die Standardvariantenstypen sind:

• Erfolg
• Warnung
• Gefahr
• Info

Sie können benutzerdefinierte Varianten hinzufügen.

Übergang

Vuex-Flash verwendet Animate.css als Standard-Übergangseffekt. Sie müssen die CSS-Datei in Ihrem Kopf-Tag hinzufügen

 < link rel =" stylesheet " href =" https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css " >

Sie können einen anderen Animationsstil mit transitionIn und transitionOut -Requisiten in mehreren Flash -Nachrichten festlegen:

 < flash-message variant = "success" transitionIn = "animated bounceIn" transitionOut = "animated bounceOut" > </ flash-message >
< flash - message variant = "danger" transitionIn = "animated flipInX" transitionOut = "animated flipOutX" > < / flash-message >

Wenn Sie eine benutzerdefinierte Vorlage verwenden, müssen Sie diese Funktion selbst hinzufügen, wenn Sie möchten.

Benutzerdefinierte Vorlage

• Die Standardvorlage finden Sie hier.
• Legen Sie {{ message }} in Ihre Vorlage, wo Sie die Flash -Nachricht anzeigen möchten.
• Verwenden Sie v-if="show" um die Warnung anzuzeigen.
• Die cssClasses -String -Daten sind alle Klassen, einschließlich variant class und Ihren custom classes , die Sie in Optionen bereitstellen. Bind -Klasse :class="cssClasses"
• Verwenden Sie die closeFlash -Methode, um die Schaltfläche Schließen zu lösen. Klicken Sie auf.
• Hier ist ein Beispiel , in dem die Implementierung der benutzerdefinierten Vorlage der Bulma -Benachrichtigung angezeigt wird

Persist Flash -Nachricht

• Hier ist ein Beispiel , das zeigt, wie der Vuex-Status in SessionStorage mithilfe von Vuex-PersistedState bestehen kann.
• Der Pfad muss der gleiche wie der Namespace sein.
• Der Mutataion -Typ im Filter muss dem Konfigurationsmutationsschlüssel gleich sein

API

Vue.use(VuexFlash, [options]);

Die folgenden Optionen sind verfügbar, um das Komponenten -Plugin zu konfigurieren:

• name [String] - Der Komponentenname. (default: 'FlashMessage')

• mixin [Boolean] - Wenn True true, registriert sich ein globales Methode Mixin zum Einstellen von Flash -Daten. (default: false)

• method [String] - Wenn mixin True festgelegt und diese Option angegeben ist, registriert sich die Global Mixin -Methode unter diesem Namen. (default: 'flash')

• namespace - [String] - Der Namespace ist der Name, der zum Erstellen von Vuex -Flash -Modul verwendet wird. Dies sollte dem gleiche wie der createFlashStore -Namespace sein. Dieser Namespace verwendet für die Verbreitung von Mutationen zum Festlegen und Löschen von Flash -Daten. Wenn angegeben, lautet der Mutationstyp '{namespace}/SET_FLASH' . (default: 'FLASH')

• duration [Number] - Die Dauer der Flash -Meldung (in Millisekunden) für automatische Blinken. (default: 3000)

• template [String] - Die Vorlage zur Anzeige von Alarm. Siehe benutzerdefinierte Vorlage.

• keep [Boolean] - Wenn falsche und Daten im Speicher festgehalten werden, wird der Speicher gelöscht, nachdem jedes Mal Warnmeldung angezeigt wird. Wenn die Speicherung vorgesehen ist, bleibt der Speicherwert mit Nullwert. (default: true)

• storage [Storage] - Der Speicher, in dem die Daten bestehen bleiben. Wenn keep auf False festgelegt sind, werden die Daten aus diesem Speicher gelöscht. (default: sessionStorage)

• key [String] - Der Schlüssel wird vom Speicher verwendet, um Daten zu bestehen. (default: '__vuexFlash')

• css [Array] - Eine Reihe benutzerdefinierter CSS -Klassennamen. Dies ist sehr nützlich, wenn Sie eine benutzerdefinierte Vorlage erstellen. (default: [])

• variantClass [Function] - Eine Funktion gibt einen CSS -Klassennamen in die Styling -Alarmkomponente basierend auf der aktuellen Variante zurück. . Kann mit this.variant Variant auf die aktuelle Variante zugreifen. Verwenden Sie keine Pfeilfunktion.
  (default: function(){ return `alert-${this.variant}`; })

• clearPersisted [Function] - Eine Funktion, die zum Löschen von persistierten Daten aus dem Speicher verwendet wird, wenn keep auf False festgelegt wird. Kann mit this.storage Storage auf den Speicher zugreifen. Verwenden Sie keine Pfeilfunktion.
  (default: function(){ this.storage.removeItem(this.key); })

createFlashStore([options])

Die folgenden Optionen sind verfügbar, um das Vuex Store -Plugin zu konfigurieren:

• namespace [String] - Dieser Namespace ist der Name, der zum Registrieren des Vuex -Flash -Store -Moduls verwendet wird. (default: 'FLASH')

• setter [String] - Dies ist der mutation name von Flash Message Setter.IB Bereitstellung, der Mutationsschlüssel lautet '${namespace}/${setter}' . (default: 'SET_FLASH')

• variants [Array] - Ein Array benutzerdefinierter Varianten, die als Status verwendet werden sollen. Sie werden mit Standardvarianten verschmolzen. (default: [])

Lizenz

MIT