Introdução
O vue-sweetalert2 é uma biblioteca para o VueJS que é utilizada para exibir alertas na tela.
É uma biblioteca muito útil, todo sistema deve exibir alertas para ir informando para o usuário se está tendo sucesso ou erro nas operações que está realizando.
Normalmente, as bibliotecas de interface, já tem os seus alertas, porém o SweetAlert traz um alerta com animação, mais bonito e amigável ao usuário.
Instalação
Para realizar a instalação no projeto, utilize o comando:
//se estiver utilizando NPM
npm install vue-sweetalert2
//ou
//se estiver utilizando YARN
yarn add vue-sweetalert2
Depois de instalar a biblioteca é necessário realizar a configuração no arquivo main.js
import Vue from "vue";
import App from "./App.vue";
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
import VueSweetalert2 from "vue-sweetalert2"; //importa a lib
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
import "sweetalert2/dist/sweetalert2.min.css"; //configura css
Vue.use(VueSweetalert2); //usa a biblioteca
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App)
}).$mount("#app");
Neste main.js também foi adicionado a biblioteca do BootstrapVue, para utilizar os botões de ação que exibirão os alertas.
Caso queira ver como fazer a instalação do BootstrapVue, veja aqui.
Alerta padrão
Depois de concluir a instalação e configuração no main.js, a biblioteca já está pronta para uso.
Para fazer o alerta padrão aparecer na tela, será necessário um botão que irá disparar a ação de abrir o alerta, qualquer outro item também pode disparar essa ação, aqui será utilizado o botão.
O botão irá chamar um método, que terá a abertura do alerta, veja:
//App.vue
<template>
<div id="app" class="container mt-3">
<b-button @click="showAlert" class="mr-2">Padrão</b-button>
</div>
</template>
<script>
export default {
methods: {
showAlert() {
this.$swal("Alerta padrão!!!");
},
},
};
</script>
Ao rodar o projeto e acessar o endereço http://localhost:8080, terá o botão na tela para abrir o alerta, ao clicar, será exibido esse alerta:
Alerta de sucesso
O alerta de sucesso, pode ser utilizado em algumas ocasiões quando o usuário tem sucesso em alguma operação realizada.
Alguns exemplos são: Exclusão de um registro, salvar algum registro, alguma outra ação realizada.
O alerta de sucesso do sweetalert2 contém além do texto, uma animação e uma imagem de sucesso, facilitando muito para o usuário, ver que a operação foi realmente concluída.
Para realizar a implementação, coloque mais um botão ao lado do já criado, e mais um método para chamar a ação de abrir o alerta.
O método que irá fazer a chamada do alerta, pode enviar 3 parâmetros, um texto principal, que será a mensagem de destaque, um texto secundário, e o tipo do alerta, que nesse caso é success. Veja o exemplo:
//App.vue
<template>
<div id="app" class="container mt-3">
<b-button @click="showAlert" class="mr-2">Padrão</b-button>
<b-button @click="showAlertSuccess" class="mr-2">Sucesso</b-button>
</div>
</template>
<script>
export default {
methods: {
showAlert() {
this.$swal("Alerta padrão!!!");
},
showAlertSuccess() {
this.$swal("Sucesso", "Senha atualizada com sucesso!", "success");
},
},
};
</script>
Com esse código, ao clicar no botão “sucesso”, irá abrir esse alerta:
Alerta de erro
É utilizado para informar que algum erro aconteceu enquanto o usuário realizava alguma operação.
É muito importante informar ao usuário que algo ocorreu, para que ele consiga tomar alguma outra decisão, seja tentar novamente, informar sobre problema no sistema ou qualquer outra ação.
Para implementar o de erro, é da mesma forma do alerta de sucesso. Como o alerta aceita 3 parâmetros, é possível trocar as mensagens principal e secundária e enviar o tipo "error" no lugar de "success".
//App.vue
<template>
<div id="app" class="container mt-3">
<b-button @click="showAlert" class="mr-2">Padrão</b-button>
<b-button @click="showAlertSuccess" class="mr-2">Sucesso</b-button>
<b-button @click="showAlertError" class="mr-2">Erro</b-button>
</div>
</template>
<script>
export default {
methods: {
showAlert() {
this.$swal("Alerta padrão!!!");
},
showAlertSuccess() {
this.$swal("Sucesso", "Senha atualizada com sucesso!", "success");
},
showAlertError() {
this.$swal("Oops...", "Algum erro aconteceu!", "error");
},
},
};
</script>
Sweetalert2 Toast
O toast também é uma forma de exibir um alerta na tela para o usuário, porém ele é um pouco menor que o alerta convencional, e normalmente colocado nos cantos.
Eu particularmente prefiro esse tipo de alerta para ações que o usuário faz muito no sistema como salvar registros, atualizar registros e entre outros, para que o alerta não fique atrapalhando ele.
Porém para realizar a configuração do toast, é um pouco diferente do padrão, será necessário adicionar uma configuração global no arquivo main.js para que depois seja possível disparar a ação do toast.
Atualize o main.js, deixe dessa forma:
//main.js
import Vue from "vue";
import App from "./App.vue";
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
import VueSweetalert2 from "vue-sweetalert2";
//importado javascript da biblioteca base
import Swal from "sweetalert2/dist/sweetalert2.js";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
import "sweetalert2/dist/sweetalert2.min.css";
Vue.use(VueSweetalert2);
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
//configuração do Toast
const Toast = Swal.mixin({
toast: true,
position: "top-end",
timer: 5000,
timerProgressBar: true,
showConfirmButton: false
});
//salva a configuração global na palavra "Toast"
window.Toast = Toast;
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App)
}).$mount("#app");
Com essa configuração, agora é possível fazer a chamada do toast em qualquer lugar do sistema.
Vamos criar mais um botão com um método para fazer a chamada do Toast.
<template>
<div id="app" class="container mt-3">
<b-button @click="showAlert" class="mr-2">Padrão</b-button>
<b-button @click="showAlertSuccess" class="mr-2">Sucesso</b-button>
<b-button @click="showAlertError" class="mr-2">Erro</b-button>
<b-button @click="showAlertToast" class="mr-2">Toast</b-button>
</div>
</template>
<script>
export default {
methods: {
showAlert() {
this.$swal("Alerta padrão!!!");
},
showAlertSuccess() {
this.$swal("Sucesso", "Senha atualizada com sucesso!", "success");
},
showAlertError() {
this.$swal("Oops...", "Algum erro aconteceu!", "error");
},
showAlertToast() {
Toast.fire("Dados cadastrados com sucesso", "", "success");
},
},
};
</script>
Repare que agora, em vez de invocar o this.$swal, é invocado o Toast.fire, esse Toast é o configurado no main.js, e o fire é o que dispara a ação da biblioteca.
É possível passar 3 parâmetros também para o toast, nesse caso o segundo coloquei vazio, é um segundo texto, porém acho que só o primeiro já resolve o problema. E o terceiro parâmetro é o tipo, que nesse caso é success.
O resultado desse código, ao clicar no botão “toast” é esse:
Código fonte
O código fonte dos exemplos estão no meu CodeSandbox
Para ver outros canais onde o posto conteúdo e meu Github, veja os Links do Programando Soluções.
Vídeo
Conclusão
Esse alerta é uma alternativa que pode ser utilizado no seu sistema, tem um layout mais amigável, além de outras opções de layout, uma dificuldade que achei somente foi não ter muita documentação, mas mesmo assim, é possível encontrar na biblioteca algumas formas de uso e variações que podem ajudar no projeto.
Referências
https://www.npmjs.com/package/vue-sweetalert2
https://github.com/avil13/vue-sweetalert2