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:

<template>
  <div class="modal-card" style="width: auto">
    <header class="modal-card-head">
      <p class="modal-card-title">Cobrar</p>
    </header>
    <section class="modal-card-body">
      {{ dispositivo }}
    </section>
    <footer class="modal-card-foot">
      <b-button @click="cobrar()" type="is-success">Ok</b-button>
      <b-button @click="cerrar()">Cancelar</b-button>
    </footer>
  </div>
</template>
<script>
export default {
  props: ["dispositivo"],
  methods: {
    cerrar() {
      this.$parent.close();
    },
    cobrar() {
      const costo = 1;
      if (costo <= 0) {
        return;
      }
      this.$emit("cobrado", costo);
    },
  },
};
</script>

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:

import DialogoCobrar from "./DialogoCobrar.vue";

Y luego indicamos que vamos a usarlo:

export default {
  components: { DialogoCobrar },
}

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

<template>
  <b-modal
        :active.sync="mostrarModalCobrar"
        aria-modal
        aria-role="dialog"
        has-modal-card
        :destroy-on-hide="true"
        trap-focus
      >
        <dialogo-cobrar
          @cobrado="onCobrado"
          :dispositivo="dispositivoParaCobrar"
        />
    </b-modal>
</template>

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:

export default {
  components: { DialogoCobrar },
  data: () => ({
    mostrarModalCobrar: false,
    dispositivoParaCobrar: {},
  }),
  methods: {
    onCobrado(costo) {
      console.log({ costo });
    },
  }
}

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:

// Llamado para terminar de rentar un equipo con tiempo límite
async cobrar(dispositivo) {
  console.log({ dispositivo });
  this.dispositivoParaCobrar = dispositivo;
  this.mostrarModalCobrar = true;
}

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.

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.