vue3 bootstrap5 modal

＃vue3-bootstrap-5-modal-component使用Bootstrap 5用於VUE 3的簡單模態組件

現場演示

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'

組件設置：

您可以在main.js文件中將其導入globaly：

 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（布爾值，必需）：對於v模型組件
• 可關閉（布爾值）：允許使用關閉按鈕或背景點擊關閉模態
• 標題（字符串）：模態的標題內容
• 容器（字符串）：默認情況下，Bootstrap類“容器”將傳遞給組件。如果將此道具設置為“ SM”，則將添加“ class” container-sm”
• 最大寬度（字符串）：模態的最大寬度。可以是％，px ...