vue3 bootstrap5 modal

# Vue3-bootstrap-5-modal-composant un composant modal simple pour vue 3 à l'aide de bootstrap 5

Démo en direct

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

Dépendances:

Ce composant nécessite Bootstrap 5 et Popper à installer

 npm install bootstrap@next
npm install @popperjs/core

Vous pouvez ensuite les inclure dans votre fichier main.js :

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

Configuration des composants:

Vous pouvez l'importer mondialement dans votre fichier main.js :

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

Ou vous pouvez l'importer localement dans chaque composant lorsque vous en avez besoin:

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

Une fois importé, vous pouvez utiliser le composant comme suit:

 <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>

Utilisation des composants:

Le composant modal prend 5 accessoires:

• ModelValue (booléen, obligatoire): Pour le modèle V, le composant
• Fermable (booléen): Laissez fermer le modal à l'aide du bouton Fermer ou de la toile de fond Click
• en-tête (chaîne): contenu de l'en-tête du modal
• conteneur (chaîne): par défaut, la classe bootstrap "conteneur" passe au composant. Si cet accessoire est défini sur "SM", la classe "Container-SM" sera ajoutée
• largeur max (chaîne): largeur maximale du modal. Peut être%, px ...