Introdução
O Toast é um componente utilizado para enviar notificações ao usuário.
Sempre que precisar informar algo ao usuário, como uma mensagem de sucesso ou falha ao cadastrar um registro, um alerta, uma nova mensagem do sistema e entre outros.
Este recurso é muito útil e amplamente utilizado nos sistemas web, por isso é importante saber como criar este componente de forma reutilizável, para que o sistema mantenha uma configuração padrão e seja fácil de utilizar a qualquer momento.
Como exibir
Para este tutorial, será necessário ter uma instalação padrão do BootstrapVue, caso queira ver como fazer, veja neste link.
Há algumas formas de utilizar, porém a forma que acho melhor é utilizar um método para invocar o Toast.
Então para isso, vou criar um botão, no componente App.vue, para chamar esse método:
<b-button class="mr-3" @click="mostrar">Mostrar toast</b-button>
Agora, vou criar o método mostrar que conterá a configuração:
mostrar() {
this.$bvToast.toast(`Descrição`, {
title: "Titulo",
autoHideDelay: 3000
});
},
O $bvToast é uma palavra reservada do BootstrapVue para invocar o alerta.
A função toast recebe dois parâmetros, o primeiro é a descrição e o segundo são as configurações de exibição.
Neste caso, foi configurado um título, e um tempo para ele sumir automaticamente.
O resultado deste exemplo é:
Configurar a cor
Para configurar a cor, é necessário passar nas configurações, a configuração do variant.
Essa propriedade aceita todas as cores padrão do BootstrapVue, veja uma lista das cores aqui.
O método para invocar com a cor verde, fica assim:
mostrar() {
this.$bvToast.toast(`Descrição`, {
title: "Titulo",
autoHideDelay: 3000,
variant: "success"
});
},
Caso queira, pode trocar a cor para que achar melhor para o seu caso de uso.
Configurar o append
Por padrão, quando clica para abrir várias vezes, o mais antigo vai indo para baixo, e o novo sempre ocupa o lugar do mais antigo, fazendo este comportamento:
Porém é possível configurar para os novos, não ocuparem o lugar do antigo, mas sim ir para baixo.
É necessário passar mais uma propriedade de configuração, que é a appendToast:
mostrar() {
this.$bvToast.toast(`Descrição`, {
title: "Titulo",
autoHideDelay: 3000,
variant: "success",
appendToast: true
});
},
Com essa configuração, o resultado é este:
Configurar o posicionamento
Por padrão, ele é exibido no canto superior direito, acredito que na maioria dos sistemas são assim.
Porém é possível configurar o posicionamento para outros lugares da tela.
Para isso, é necessário utilizar a propriedade toaster e informar qual o posicionamento deseja.
Neste exemplo, a configuração fará com que apareça no canto superior esquerdo:
mostrar() {
this.$bvToast.toast(`Descrição`, {
title: "Titulo",
autoHideDelay: 3000,
variant: "success",
toaster: "b-toaster-top-left"
});
},
Essa configuração, traz esse resultado:
Pode ser passado todos esses parâmetros para a configuração do posicionamento:
b-toaster-top-right //topo a direita (padrão)
b-toaster-top-left //topo a esquerda
b-toaster-top-center //topo ao centro
b-toaster-top-full //completo ao centro (tela cheia no centro superior)
b-toaster-bottom-right //embaixo a direita
b-toaster-bottom-left //embaixo a esquerda
b-toaster-bottom-center //embaixo ao centro
b-toaster-bottom-full //completo ao centro (tela cheia no centro inferior)
Configurar um Toast reutilizável
É comum, utilizar este recurso no sistema todo, para exibir alerta em todas as operações do usuário.
Imagine em todo lugar que precisar de um, colocar todo o código de configuração, embora sejam poucas linhas, o código pode ficar bem sujo rapidamente caso use em muitos lugares.
E o pior, para dar manutenção nisso pode ficar bem mais complexo, imagine ter que trocar o tempo padrão ou o posicionamento em todos eles, pode ser bem entediante.
Para evitar isso é necessário configurar de uma forma fácil para reutilizar.
E para fazer isso, vou utilizar o Mixin do VueJS, e nos lugares que precisar utilizar, vou importar o Mixin.
Nos diretórios do projeto, crie um diretório chamado Mixin, e dentro dele crie o arquivo toastMixin.js.
Dentro desse arquivo, será colocado a configuração padrão que desejamos para o sistema, vai ficar assim:
//toastMixin.js
export default {
methods: {
mostrarToastMixin(description, title, variant) {
this.$bvToast.toast(description, {
title: title,
autoHideDelay: 4000,
appendToast: false,
variant: variant,
toaster: "b-toaster-top-left"
});
}
}
}
Agora, no componente que for utilizar, é necessário importar este mixin e chamar o método mostrarToastMixin.
No meu caso, vou utilizá-lo no componente App.vue
Antes do export default, faça a importação do mixin:
import ToastMixin from "./mixins/toastMixin";
Depois, declare este mixin, dentro do export default:
mixins: [ToastMixin],
E agora, onde for chamar, utilize o método mostrarToastMixin passando a descrição, título e variação de cor desejada:
<b-button class="mr-3" @click="mostrarToastMixin('esta é a descricao', 'titulo', 'success')">Mostrar toast mixin</b-button>
E o resultado é esse:
Caso queira um novo toast, chame novamente este método, passando novas configurações de título, descrição e cor:
<b-button class="mr-3" @click="mostrarToastMixin('esta é a descricao2', 'teste', 'warning')">Mostrar toast mixin</b-button>
Dessa forma, está bem reutilizável e com uma configuração padrão.
Por exemplo, o posicionamento e o tempo até sumir, são configurações que dificilmente mudam, por isso decidi não utilizar variável para configurar.
Você pode utilizar essa técnica e personalizar muito mais para se adaptar a sua realidade.
Mas é importante que seja configurado em um lugar central e que seja fácil de reutilizar, para facilitar a manutenção e o uso para você futuramente.
Vídeo
Código fonte
O código fonte está no meu CodeSandbox, neste link.
Para ver outros canais onde o posto conteúdo, veja os Links do Programando Soluções.
Referências
https://bootstrap-vue.org/docs/reference/color-variants#color-variants-and-css-class-mapping
https://br.vuejs.org/v2/guide/mixins.html