vue3 bootstrap5 modal

# Vue3-bootstrap-5-modal-componente Un componente modal simple para Vue 3 usando bootstrap 5

Demostración en vivo

https://florianbgt.github.io/vue3-bootstrap5-modal/

Dependencias:

Este componente requiere que se instalen Bootstrap 5 y Popper

 npm install bootstrap@next
npm install @popperjs/core

Luego puede incluirlos en su archivo main.js :

 import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap'

Configuración del componente:

Puede importarlo global en su archivo main.js :

 import Modal form 'path to file/Modal.vue'
...
app.component('Modal', Modal);

O puede importarlo localy en cada componente cuando lo necesite:

 import Modal from 'path to file/Modal.vue'

Una vez importado, puede usar el componente de la siguiente manera:

 <Modal v-model="modal" header="Modal">
  <p>This modal have to be closed from the parent</p>
  <p>This modal will be close from the parent in 5 seconds</p>
</Modal>

Uso de componentes:

El componente modal toma 5 accesorios:

• ModelValue (booleano, requerido): para V-model el componente
• cerrable (booleano): deje cerrar el modal con el botón de cierre o el fondo, haga clic en
• encabezado (cadena): contenido de encabezado del modal
• contenedor (cadena): por predeterminado, la clase de arranque "contenedor" se pasa al componente. Si este accesorio se establece en "SM", se agregará clase "Container-SM"
• width max (cadena): ancho máximo del modal. Puede ser %, PX ...