vue3 bootstrap5 modal

# VUE3-BOOTSTRAP-5-модальный компонент Простой модальный компонент для VUE 3 с использованием Bootstrap 5

Живая демонстрация

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

Зависимости:

Этот компонент требует установки Bootstrap 5 и Popper

 npm install bootstrap@next
npm install @popperjs/core

Затем вы можете включить их в свой файл main.js :

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

Настройка компонентов:

Вы можете импортировать IT Globaly в вашем файле main.js :

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

Или вы можете импортировать его локали в каждом компоненте, когда вам это нужно:

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

После импорта вы можете использовать компонент следующим образом:

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

Использование компонентов:

Модальный компонент принимает 5 реквизита:

• ModelValue (Boolean, требуется): для V-модели компонент
• Closable (Boolean): позвольте закрыть модаль, используя кнопку закрытия или нажатие на фоне нажатия
• Заголовок (строка): содержание заголовка модала
• Контейнер (String): по умолчанию класс начальной загрузки «контейнер» передается в компонент. Если эта опора установлена ​​на «SM», будет добавлен класс «контейнер-SM»
• максимальная ширина (строка): максимальная ширина модала. Может быть %, px ...