Creación de Modales en Vue3 con SweetAlert2

SweetAlert2, es una librería javascript que permite crear ventanas emergentes con un diseño profesional y fácil de personalizar e implementar, es compatible con la mayoría de los navegadores web como: Edge, Chrome, Firefox, Safari, entre otros más.

Está pensada para poder utilizarse junto a JavaScript Vanilla. Por lo tanto se puede utilizar para distintos frameworks como React, Vue y Angular, en este post se explicará cómo utilizarla en Vue3.

Instalación

 Podemos realizarla de dos maneras ambos casos están en la web en el apartado de “Installation”

Primer método

Mediante el CDN que la misma página nos proporciona:

Segundo método

Si seguimos haciendo scroll hacia abajo nos encontraremos con un apartado que contiene 3 iconos:

Damos click en el de “Vue”.  Automáticamente no llevará a un repositorio de GitHub.

Una vez ahí bajamos un poco y nos aparecerá el comando que debemos introducir en la consola

(Importante, hay que estar situados en nuestro proyecto)

npm install -S vue-sweetalert2

De esta forma tendríamos  todos los paquetes y dependencias de la librería en nuestro proyecto.

Como Importarla

 El primer paso es  entrar en el archivo “Main.js”. El cuál se encuentra en la carpeta de “src” 

Posteriormente tenemos que importar la librería y su CSS.

Y finalmente debemos crear la constante “app” igualarla a “createApp(App)” e indicar a esa constante que debe usar la librería importada.

Trabajar con la librería

Trabajar con ello no supone ninguna dificultad, tras importarla en el “main.js” esta es global por lo tanto podremos acceder a ella de 2 maneras muy sencillas usando:

this.$swal()  o Vue.swal().

Ahora podremos crear modales muy diversos de manera sencilla y muy intuitiva.

Los modales suelen estar dentro de un método y son llamados con un evento. Para la creación de este modal se utilizó el siguiente código :

showAlert() {
      this.$swal.fire({
        title: "Bienvenido",
        icon: "warning"
      });
    }

Se puede observar que no tiene gran  dificultad. Para realizarlo necesitamos primero llamar a la librería con “this.$swal({}) en el caso mostrado” y posteriormente dentro de los paréntesis y corchetes incluir todos los apartados que queremos en nuestro modal. También se puede apreciar que la sintaxis tiene similitud con la tecnología JSON.

SweetAlert2 nos proporciona los siguientes iconos que podemos utilizar:

Para llamar a este modal y a su vez al método del cual forma parte, el evento que utilizo es el  “@click”.

<button class="btn btn-success" @click="showAlert()">Hola</button

No se necesita nada más para su funcionamiento, con esto ya estaría terminado.

Modal con imagen

Se puede perfectamente insertar imágenes dentro de los modales, ya pueden ser desde el proyecto o con un enlace de la foto. Es necesario especificar la altura y la anchura de la foto.

El código para su realización es el siguiente.

imagenAlert() {
      this.$swal.fire({
        imageUrl: "https://i.ebayimg.com/images/g/VuwAAOSw--NexIbC/s-l500.jpg",
        imageHeight: 600,
        imageWidth: 400,
        imageAlt: "DeadPool",
        title: "¡Chimichanga!",
      });
    }

Este tipo de modal puede servir por si el usuario solo quiere seleccionar algo en concreto y ver todos los detalles que le proporcionamos de dicho apartado.

Modal customizado

Este tipo de modal permite personalizarse más a profundidad, es decir que se puede: cambiar el color de la fuente o el tipo, poner una foto de fondo o incluso un gif.

El codigo para hacerlo:

customAlert() {
      this.$swal.fire({
        title: "Modal custom",
        width: 500,
        heightAuto: false,
        padding: "3em",
        color: "yellow",
        background:
          "#272928 url(https://media4.giphy.com/media/l36kU80xPf0ojG0Erg/giphy.gif)",
      });
    }

Utiliza elementos CSS para poder moldearlo a nuestra manera.

Es muy útil para distintas páginas web para sostener la misma temática  en toda la página.

Modal con HTML5 dentro

La librería de SweetAlert2 permite insertar fragmentos de código HTML5 dentro de los modales, para ello simplemente se necesita el comando “html:” y a continuación escribir el lenguaje de marcas.

También se puede observar que es posible agregar más botones y editar su contenido, hay que tener en cuenta  que los botones son de tipo boolean por lo que si los queremos poner hay que indicar si son true o false,el modal mostrado se crea con el siguiente código:

 htmlAlert() {
      this.$swal.fire({
        title:
          "<ul> <li>lista</li> <li> HTML </li> <li>en el </li> <li>modal</li> </ul>",
        icon: "info",
        html:
          "Puedes usar <b>negrita</b>, " +
          '<a href="https://github.com/NazarRom/sweetalert2_post.git" target="_blank">enlace</a> ' +
          "y otras etiquetas HTML",
        showCloseButton: true,
        showCancelButton: true,
        focusConfirm: false,
        confirmButtonText: "Genial",
        cancelButtonText: "Cancel",
      });
    }

Apreciamos que en la etiqueta “title:” también hay código html, la librería lo permite y se pinta como html en el navegador pero obtiene estilos de “title” sin embargo la etiqueta “html:” tiene sus propios estilos. 

La utilidad de este modal ya depende de la creatividad de la persona, pero principalmente se puede usar para mostrar detalles específicos.

Modal de confirmación

Como su propio nombre indica se pueden usar perfectamente para confirmar alguna acción en concreto.

Al pulsar en el botón “Guardar” saldrá otra ventana emergente de que los datos se han guardado.

De lo contrario si pulsamos en el botón “No guardar” saldrá otra ventana indicando que no se ha guardado nada.

El código es el siguiente:

saveAlert() {
      this.$swal
        .fire({
          title: "¿Guardar los cambios?",
          showDenyButton: true,
          showCancelButton: true,
          confirmButtonText: "Guardar",
          denyButtonText: "No guardar",
        })
        .then((result) => {
          /* Read more about isConfirmed, isDenied below */
          if (result.isConfirmed) {
            this.$swal.fire("Guardado!", "", "success");
            this.savedExm();
          } else if (result.isDenied) {
            this.$swal.fire("Los cambios no se han guardado", "", "info");
            this.dontSavedExm();
          }
        });
    }

Funciona mediante una promesa.Una promesa es un objeto que representa un valor que puede que esté disponible “ahora”, en un “futuro” o que “nunca” lo esté.

Si nos fijamos en el código la promesa nos devuelve un “If” en caso de afirmación o negacion que saque el modal por pantalla y al mismo tiempo podemos observar que está presente un método “saveExm()” eso nos da a entender que la librería nos permite añadir métodos creados por nosotros para un mejor funcionamiento.

savedExm() {
      console.log("Saved");
    }

    dontSavedExm() {
      console.log("Dont saved");
    }

Tenemos estos dos métodos y dependiendo de la condición en la promesa se ejecutará uno u otro.

Si pulsamos en “Guardar”:

La consola nos devolverá “Saved”, ya que se ejecuta el método llamado savedExm().

Si pulsamos en “No guardar”:

La consola nos devolverá, ya que se ejecuta el método dontSavedExm().

Los ejemplos anteriormente mostrados solo son algunas representaciones de lo que es capaz la librería.

Las posibilidades de crear modales distintos y muy peculiares es infinita, el único límite es la imaginación.

Autor: Nazar Romanyuk

Curso: Desarrollo Web Full Stack + MultiCloud con Azure y AWS

Centro: Tajamar

Año académico: 2022-2023

El código de la aplicación se encuentra en el siguiente enlace a GitHub