vuex flash Download - vuex flash Source Téléchargement

vuex flash

Code source FLASH

1.0.0

Télécharger

Vuex Flash

Composant de message flash pour vue.js dans Vuex

Caractéristiques

Flash multiple
modèle personnalisé
Persister les données flash en stockage
hautement personnalisable

Démo et exemple

Démo en direct avec un extrait de code

Installer

 $ npm install --save vuex-flash

Usage

Composant d'enregistrement:

 //main.js

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

Vue . use ( VuexFlash ) ;

Enregistrer le magasin Vuex:

 //store.js

import { createFlashStore } from 'vuex-flash' ;

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

Données flash

Utilisation de `global mixin`

Mettez simplement une option mixin: true Lors de l'enregistrement des composants, la méthode this.flash sera avaiable dans chaque composant

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

Puis dans d'autres composants:

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

Vous pouvez modifier le nom de la méthode:

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

À propos de Global Mixin

Utilisation de `mutation`

Au lieu de Global Mixin, vous pouvez commettre une mutation à partir de composants pour définir le message Flash:

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

Dans mapMutations Way:

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

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

Notez que le type de mutation par défaut est FLASH/SET_FLASH . Vous pouvez le configurer en options.

Afficher le flash

 //in somepage component

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

Flash multiple

 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 >

Accessoires

Nom	Taper	Défaut	Dessiner
variante	Chaîne	-	`required` .
important	Booléen	FAUX	Si c'est vrai, il n'y aura pas d'option étroite d'alerte flash
autohide	Booléen	FAUX	Alerte Flash à masquer automatiquement
transitionname	Chaîne	-transition sur mesure	Vue Transitions `name` Prop More
transitionner	Chaîne	'Animated Fadeindown'	Espace séparée de la chaîne pour les transitions `enter-active-class` plus
transition	Chaîne	'Animated FadeoutUp'	Espace séparé de la chaîne pour les transitions `leave-active-class`

Style d'alerte flash

Vuex-Flash utilise le composant d'alerte Bootstrap V4 comme alert par défaut. Vous devez ajouter le fichier CSS bootstrap dans votre balise de tête.

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

Vous pouvez toujours utiliser votre propre alerte à l'aide d'un modèle personnalisé.

Variante

Les types de variantes par défaut sont:

succès
avertissement
danger
informations

Vous pouvez ajouter des variantes personnalisées.

Transition

Vuex-Flash utilise animate.css comme effet de transition par défaut. Vous devez ajouter le fichier CSS dans votre balise de tête

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

Vous pouvez définir un style d'animation différent en utilisant transitionIn et transitionOut d'accessoires dans plusieurs messages flash:

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

Si vous choisissez d'utiliser un modèle personnalisé, vous devez ajouter cette fonctionnalité vous-même si vous le souhaitez.

Modèle personnalisé

Le modèle par défaut peut être trouvé ici.
Mettez {{ message }} dans votre modèle où vous souhaitez afficher le message Flash.
Utilisez v-if="show" pour afficher l'alerte.
Les données de chaîne cssClasses seront toutes des classes, y compris variant class et vos custom classes que vous fournissez en options. Classe de liais :class="cssClasses"
Utilisez la méthode closeFlash pour déclencher le bouton Fermer Cliquez.
Voici un exemple qui montrait l'implémentation du modèle personnalisé de la notification Bulma

Message flash persiste

Voici un exemple qui montre comment persister l'état Vuex dans SessionStorage à l'aide de VueX-PersistEdState.
Le chemin doit être le même que l'espace de noms.
Le type de mutataion dans le filtre doit être le même que la clé de mutation de configuration

API

`Vue.use(VuexFlash, [options]);`

Les options suivantes sont disponibles pour configurer le plugin de composant:

name [String] - le nom du composant. (default: 'FlashMessage')
mixin [Boolean] - Si vrai, une méthode globale Mixin s'inscrira pour définir des données flash. (default: false)
method [String] - Si mixin est défini et cette option est donnée, la méthode Global Mixin s'inscrira sous ce nom. (default: 'flash')
namespace - [String] - L'espace de noms est le nom utilisé pour la création du module createFlashStore Flash. Cet espace de noms utilisé pour commander la mutation pour définir et effacer les données flash. Si vous êtes fourni, le type de mutation sera '{namespace}/SET_FLASH' . (default: 'FLASH')
duration [Number] - La durée d'affichage du message flash (en millisecondes) pour les flashs de masque automatique. (default: 3000)
template [String] - Le modèle à utiliser Afficher l'alerte. Voir modèle personnalisé.
keep [Boolean] - Si FALSE et les données sont persistées dans le stockage, le stockage sera effacé après avoir affiché une alerte à chaque fois. S'il est fourni, le stockage restera avec une valeur nul. (default: true)
storage [Storage] - Le stockage où les données sont persistées. Si keep est défini sur False, les données seront effacées de ce stockage. (default: sessionStorage)
key [String] - La clé est utilisée par le magasin pour persister les données. (default: '__vuexFlash')
css [Array] - Un tableau de noms de classe CSS personnalisés. Ceci est très utile lors de la création d'un modèle personnalisé. (default: [])
variantClass [Function] - Une fonction renvoie un nom de classe CSS dans le composant d'alerte de style en fonction de la variante actuelle. .Can peut accéder à la variante actuelle en utilisant this.variant . N'utilisez pas la fonction Arrow.
(default: function(){ return `alert-${this.variant}`; })
clearPersisted [Function] - Une fonction utilisée pour effacer les données persistantes du stockage lorsque keep est défini sur false.Pura accéder au stockage à l'aide de this.storage . N'utilisez pas la fonction Arrow.
(default: function(){ this.storage.removeItem(this.key); })

`createFlashStore([options])`

Les options suivantes sont disponibles pour configurer le plugin Vuex Store:

namespace [String] - Cet espace de noms est le nom utilisé pour enregistrer le module de magasin Vuex-Flash. (default: 'FLASH')
setter [String] - Il s'agit du mutation name de Flash Message Setter.Si fourni, la touche de mutation sera '${namespace}/${setter}' . (default: 'SET_FLASH')
variants [Array] - Un tableau de variantes personnalisées à utiliser comme état. sera fusionné avec des variantes par défaut. (default: [])