vuex flash

Vuex Flash

Componente de mensagem flash para vue.js dentro de vuex

Características

• Flash múltiplo
• modelo personalizado
• Persiste dados flash em armazenamento
• altamente personalizável

Demo e exemplo

Demoção ao vivo com trenó 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 a loja Vuex:

 //store.js

import { createFlashStore } from 'vuex-flash' ;

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

Dados flash

Usando global mixin

Basta colocar uma opção mixin: true durante o componente de registro, o método this.flash será adequado em todos os componentes

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

Então, em outros componentes:

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

Você pode alterar o nome do método:

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

Sobre o Mixin Global

Usando mutation

Em vez de Mixin Global, você pode cometer mutação dos componentes para definir a mensagem Flash:

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'
  } )
}

Observe que o tipo de mutação padrão é FLASH/SET_FLASH . Você pode configurá -lo em opções.

Exibir flash

 //in somepage component

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

Flash múltiplo

 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 >

Adereços

Nome	Tipo	Padrão	Descrição
variante	Corda	-	Prop required o tipo de variante flash
importante	Booleano	falso	Se for verdade, não haverá opção de alerta flash
Autohide	Booleano	falso	ALERTA DE FLASH DE OCENDO AUTOMAL
TransitionName	Corda	transição de classes personalizadas	Vue transições name mais
transitório	Corda	'Fadeindown animado'	String space string para Vue enter-active-class
Transição	Corda	'FadeOutup animado'	string space string para vue leave-active-class

Estilo de alerta flash

O Vuex-Flash usa o componente de alerta do Bootstrap V4 como alerta padrão. Você precisa adicionar o arquivo CSS do Bootstrap na sua etiqueta de cabeça.

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

Você sempre pode usar seu próprio alerta usando modelo personalizado.

Variante

Os tipos de variantes padrão são:

• sucesso
• aviso
• perigo
• informações

Você pode adicionar variantes personalizadas.

Transição

Vuex-flash usa o Animate.css como efeito de transição padrão. Você precisa adicionar o arquivo CSS em sua tag de cabeça

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

Você pode definir um estilo de animação diferente usando acessórios transitionIn e transitionOut em várias mensagens 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 >

Se você optar por usar o modelo personalizado, precisará adicionar esse recurso, se quiser.

Modelo personalizado

• O modelo padrão pode ser encontrado aqui.
• Coloque {{ message }} dentro do seu modelo onde você deseja mostrar a mensagem flash.
• Use v-if="show" para mostrar o alerta.
• Os dados da string cssClasses serão todas as classes, incluindo variant class e suas custom classes que você fornece nas opções. Classe de ligação :class="cssClasses"
• Use o método closeFlash para acionar o botão Fechar o clique.
• Aqui está um exemplo de que mostra a implementação do modelo personalizado de notificação de Bulma

Mensagem flash persistente

• Aqui está um exemplo que mostra como persistir o estado de Vuex no SessionStorage usando o Vuex-PersistedState.
• O caminho deve ser o mesmo que o espaço de nome.
• O tipo de mutataion no filtro deve ser o mesmo que a chave de mutação de configuração

API

Vue.use(VuexFlash, [options]);

As seguintes opções estão disponíveis para configurar o plugin do componente:

• name [String] - O nome do componente. (default: 'FlashMessage')

• mixin [Boolean] - Se verdadeiro, um mixin de método global se registrará para definir dados flash. (default: false)

• method [String] - Se mixin for definido e esta opção for fornecida, o método global de mixin será registrado sob esse nome. (default: 'flash')

• namespace - [String] - O espaço para nome é o nome usado para criar o módulo Flash createFlashStore . Este espaço para nome usado para cometer mutação para definir e limpar dados flash. Se fornecido, o tipo de mutação será '{namespace}/SET_FLASH' . (default: 'FLASH')

• duration [Number] - A duração da exibição da mensagem flash (em milissegundos) para flashes de oculto automático. (default: 3000)

• template [String] - O modelo a ser usado mostrando alerta. Consulte o modelo personalizado.

• keep [Boolean] - Se False e os dados forem persistidos em armazenamento, o armazenamento será liberado após o alerta sempre. Se fornecido, o armazenamento manterá o valor nulo. (default: true)

• storage [Storage] - O armazenamento onde os dados são persistidos. Se keep for definido como falso, os dados serão limpos a partir deste armazenamento. (default: sessionStorage)

• key [String] - A chave é usada pela loja para persistir dados. (default: '__vuexFlash')

• css [Array] - Uma variedade de nomes de classe CSS personalizados. Isso é muito útil ao criar um modelo personalizado. (default: [])

• variantClass [Function] - Uma função retorna um nome de classe CSS para componente de alerta de estilo com base na variante atual. . Pode acessar a variante atual usando this.variant . Não use a função de seta.
  (default: function(){ return `alert-${this.variant}`; })

• clearPersisted [Function] - Uma função usada para limpar dados persistentes do armazenamento quando keep é definido como this.storage . Não use a função de seta.
  (default: function(){ this.storage.removeItem(this.key); })

createFlashStore([options])

As seguintes opções estão disponíveis para configurar o plugin Vuex Store:

• namespace [String] - Este espaço para nome é o nome usado para registrar o módulo Vuex -Flash Store. (default: 'FLASH')

• setter [String] - Este é o mutation name do flash de mensagens Setter.IF fornecido, a chave de mutação será '${namespace}/${setter}' . (default: 'SET_FLASH')

• variants [Array] - Uma matriz de variantes personalizadas a serem usadas como estado. Será mesclada com variantes padrão. (default: [])

Licença

Mit