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