En este post aprenderás a mostrar un modal personalizado usando Bulma a través de Buefy. De este modo podrás mostrar una ventana superpuesta o lo que se conoce como un modal.

Por cierto, vamos a usar componentes y propiedades de los mismos para separar los conceptos.

Te invito a repasar la comunicación entre componentes y cómo usar Buefy.

Diseñando el modal

El modal va a estar en otro componente. Esto es para separar conceptos y tener un código separado. Entonces tenemos el componente que será el modal:

Lo que te muestro es un ejemplo, pero sirve para mostrarte cómo puedes hacerlo. Tenemos un div con la clase modal-card, que tiene un header con la clase modal-card-head, un cuerpo con la clase modal-card-body y el footer con la clase modal-card-foot.

También tiene dos botones, uno es para confirmar la acción y otro para cerrar el modal. Para cerrar el modal invocamos a this.$parent.close.

En este caso como ejemplo estoy recibiendo la propiedad dispositivo, esto es para ejemplificar que podemos pasarle propiedades desde el padre. Y también estoy emitiendo el evento cobrado para que el padre lo escuche.

Obviamente todo el componente puede tener más métodos, propiedades, diseño, etcétera.

Importando componente

Ahora que ya tenemos nuestro modal vamos a importarlo en el padre e indicar que lo vamos a usar dentro de components.

Comenzamos importándolo:

Y luego indicamos que vamos a usarlo:

Ahora en nuestra plantilla (igual en el padre) vamos a usarlo dentro de un b-modal así:

Y fíjate en todas las variables que le estamos pasando (las explico más adelante). Vamos a mostrar y ocultar el modal a través de la variable mostrarModalCobrar.

También le estamos pasando la propiedad dispositivo a través de la variable dispositivoParaCobrar.

Finalmente estamos escuchando en evento cobrado, en el cual invocamos a la función onCobrado.

Manejando modal de Vue.js con Bulma

Ahora solo falta mostrar y ocultar nuestro modal. Entonces en data definimos las 3 variables anteriores, y en methods colocamos el método que será llamado cuando el modal emita el evento:

En este caso solo estoy imprimiendo la variable que se nos va a pasar desde el modal dentro de nuestro método. Y finalmente lo que desencadena y muestra el modal (modificando la bandera mostrarModalCobrar) es lo siguiente:

Entonces cuando esta función sea invocada se va a colocar el dispositivo para cobrar, mismo que ya está pasado al componente. Luego se va a mostrar el modal, y el paso siguiente será escuchar el evento cobrado que ya vimos anteriormente.

Poniendo todo junto

Ya te dije anteriormente: esto es solo un ejemplo; puedes adaptarlo a tus necesidades. Yo escribo este post como recordatorio.

Mostrar modal con Vue.js y Bulma usando Buefy con componentes

Mostrar modal con Vue.js y Bulma usando Buefy con componentes

Básicamente debes modificar la bandera para mostrar y ocultar el modal. Y desde el modal puedes pasar datos o cerrar al mismo desde adentro. Además, puedes reutilizar el modal y muchas cosas más.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 3,194 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: