vue3 bootstrap5 modal

# Vue3-bootstrap-5-modal-komponen komponen modal sederhana untuk vue 3 menggunakan bootstrap 5

Demo langsung

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

Ketergantungan:

Komponen ini membutuhkan bootstrap 5 dan popper untuk diinstal

 npm install bootstrap@next
npm install @popperjs/core

Anda kemudian dapat memasukkannya ke dalam file main.js Anda:

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

Pengaturan Komponen:

Anda dapat mengimpornya global di file main.js Anda:

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

Atau Anda dapat mengimpornya lokal di setiap komponen saat Anda membutuhkannya:

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

Setelah diimpor, Anda dapat menggunakan komponen sebagai berikut:

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

Penggunaan Komponen:

Komponen modal mengambil 5 alat peraga:

• ModelValue (Boolean, Diperlukan): Untuk V-Model Komponen
• Tutup (boolean): Izinkan untuk menutup modal menggunakan tombol tutup atau latar belakang klik
• header (string): Konten header dari modal
• container (string): per default kelas bootstrap "container" dilewatkan ke komponen. Jika prop ini diatur ke "sm", container "container-sm" akan ditambahkan
• Max-Width (String): Max lebar modal. Bisa %, px ...