vuex flash

Vuex Flash

Componente de mensaje flash para Vue.js dentro de Vuex

Características

• múltiples flash
• plantilla personalizada
• Persistir datos flash en almacenamiento
• altamente personalizable

Demostración y ejemplo

Demostración en vivo con fragmento de código

Instalar

 $ npm install --save vuex-flash

Uso

Componente de registro:

 //main.js

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

Vue . use ( VuexFlash ) ;

Registre la tienda Vuex:

 //store.js

import { createFlashStore } from 'vuex-flash' ;

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

Datos flash

Usando global mixin

Simplemente coloque una opción mixin: true Al registrar el componente, el método this.flash será disponible en cada componente

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

Luego en otros componentes:

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

Puede cambiar el nombre del método:

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

Acerca de Global Mixin

Usando mutation

En lugar de la mezcla global, puede cometer una mutación de los componentes para establecer el mensaje Flash:

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

En la forma mapMutations :

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

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

Tenga en cuenta que el tipo de mutación predeterminado es FLASH/SET_FLASH . Puede configurarlo en opciones.

Visualización flash

 //in somepage component

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

Múltiples flash

 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 >

Accesorios

Nombre	Tipo	Por defecto	Descifrado
variante	Cadena	-	Prop lado required Tipo de variante de flash
importante	Booleano	FALSO	Si es cierto, no habrá una opción cercana de alerta flash
autohide	Booleano	FALSO	Alerta de Flash Auto Hide
nombre de transición	Cadena	transición de clases personalizadas	Vue Transitions name nombre más
transición	Cadena	'Animado Fadeindown'	Cadena separada de espacio para el accesorio enter-active-class de transiciones Vue más
transición	Cadena	'Fadeutup animado'	Cadena separada de espacio para transiciones Vue Proporro leave-active-class MÁS

Estilo de alerta flash

Vuex-Flash usa el componente de alerta Bootstrap V4 como alerta predeterminada. Debe agregar el archivo Bootstrap CSS en su etiqueta de cabeza.

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

Siempre puede usar su propia alerta usando plantilla personalizada.

Variante

Los tipos de variantes predeterminados son:

• éxito
• advertencia
• peligro
• información

Puede agregar variantes personalizadas.

Transición

Vuex-Flash usa animate.css como efecto de transición predeterminado. Necesita agregar el archivo CSS en su etiqueta principal

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

Puede establecer diferentes estilo de animación utilizando accesorios transitionIn y transitionOut en múltiples mensajes 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 elige usar una plantilla personalizada, entonces debe agregar esta función usted mismo si lo desea.

Plantilla personalizada

• La plantilla predeterminada se puede encontrar aquí.
• Pon {{ message }} dentro de su plantilla donde desea mostrar el mensaje flash.
• Use v-if="show" para mostrar la alerta.
• Los datos de cadena cssClasses serán todas las clases, incluida variant class y sus custom classes que proporciona en las opciones. Bind Class :class="cssClasses"
• Use el método closeFlash para activar el clic del botón Cerrar.
• Aquí hay un ejemplo que muestra la implementación de la plantilla personalizada de la notificación de Bulma

Mensaje flash persistente

• Aquí hay un ejemplo que muestra cómo persistir el estado VUEX en SessionStorage utilizando Vuex-PersistedState.
• El camino debe ser el mismo que el espacio de nombres.
• El tipo de mutataion en el filtro debe ser el mismo que la tecla de mutación de configuración

API

Vue.use(VuexFlash, [options]);

Las siguientes opciones están disponibles para configurar el complemento de componentes:

• name [String] - el nombre del componente. (default: 'FlashMessage')

• mixin [Boolean] : si es cierto, un método global mezclar se registrará para establecer datos flash. (default: false)

• method [String] : si mixin se establece verdadera y esta opción se da, entonces el método de mezcla global se registrará bajo este nombre. (default: 'flash')

• namespace - [cadena] - El espacio de nombres es el nombre utilizado para crear el módulo Vuex Flash. Esto debería ser el mismo que el espacio de nombres createFlashStore . Este espacio de nombres utilizado para cometer una mutación para establecer y borrar datos flash. Si se proporciona, el tipo de mutación será '{namespace}/SET_FLASH' . (default: 'FLASH')

• duration [Number] : la duración de la pantalla del mensaje flash (en milisegundos) para flashes de ocultación automática. (default: 3000)

• template [String] : la plantilla a usar mostrando alerta. Ver plantilla personalizada.

• keep [Boolean] : si se persiste en falso y los datos, el almacenamiento, el almacenamiento se borrará después de mostrar alerta cada vez. Si se proporciona, el almacenamiento se mantendrá con un valor nulo. (default: true)

• storage [Storage] : el almacenamiento donde se persisten los datos. Si keep se establece en False, los datos se borrarán de este almacenamiento. (default: sessionStorage)

• key [String] : el almacén utiliza la clave para persistir datos. (default: '__vuexFlash')

• css [Array] : una matriz de nombres de clase CSS personalizados. Esto es muy útil al crear una plantilla personalizada. (default: [])

• variantClass [Function] : una función devuelve un nombre de clase CSS al componente de alerta de estilo basado en la variante actual. . Puede acceder a la variante actual usando this.variant . No use la función de flecha.
  (default: function(){ return `alert-${this.variant}`; })

• clearPersisted [Function] : una función utilizada para borrar los datos persistidos del almacenamiento cuando keep se establece en falso. puede acceder al almacenamiento usando this.storage . No use la función de flecha.
  (default: function(){ this.storage.removeItem(this.key); })

createFlashStore([options])

Las siguientes opciones están disponibles para configurar el complemento Vuex Store:

• namespace [String] : este espacio de nombres es el nombre utilizado para registrar el módulo de tienda Vuex -Flash. (default: 'FLASH')

• setter [String] : este es el mutation name de Mensaje Flash Setter. Si se proporciona, la clave de mutación será '${namespace}/${setter}' . (default: 'SET_FLASH')

• variants [Array] : una matriz de variantes personalizadas para usar como estado. Se fusionará con variantes predeterminadas. (default: [])

Licencia

MIT