vue3 bootstrap5 modal

# VUE3-Bootstrap-5-Modal-Komponenten Eine einfache Modalkomponente für VUE 3 mit Bootstrap 5

Live -Demo

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

Abhängigkeiten:

Für diese Komponente muss Bootstrap 5 und Popper installiert werden

 npm install bootstrap@next
npm install @popperjs/core

Sie können sie dann in Ihre main.js -Datei einbeziehen:

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

Komponenten -Setup:

Sie können es weltweit in Ihre main.js -Datei importieren:

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

Oder Sie können es in jeder Komponente lokal importieren, wenn Sie es benötigen:

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

Nach dem Import können Sie die Komponente wie folgt verwenden:

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

Komponentenverbrauch:

Die modale Komponente enthält 5 Requisiten:

• modelValue (boolean, erforderlich): Für V-Model die Komponente
• Schließbar (boolean): Schließen Sie das Modal mit der Schaltfläche Schließen oder Klick
• Header (String): Headerinhalt des Modals
• Container (Zeichenfolge): Pro Standard ist die Bootstrap -Klasse "Container" an die Komponente übergeben. Wenn diese Requisite auf "SM" eingestellt ist, wird die Klasse "Container-SM" hinzugefügt
• Max-Breite (String): maximale Breite des Modals. Kann %sein, px ...