Bootstrap 5 modal 不工作 VueJS 3

在使用 VueJS 3 和 Bootstrap 5 搭建网站时，我们可能会遇到一个问题：modal 不工作。这可能是因为某些原因，如组件没有正确地注册或其他一些问题。

问题

当使用以下代码时，modal 框不会弹出，也不会与 JS 代码一起工作：

<template>
  <div>
     <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Launch demo modal
     </button>

     <div class="modal" tabindex="-1" id="exampleModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

解决方案

为了使用 Bootstrap 5 modal，我们需要在 VueJS 3 组件中安装 Bootstrap。如果您尚未安装，请按照以下步骤进行安装：

npm install bootstrap

完成后，我们需要在 main.js 中导入 Bootstrap 样式：

import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'

createApp(App).mount('#app')

最后，我们需要在 App.vue 组件注册 Bootstrap 样式，代码如下：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<style>
@import "~bootstrap/scss/bootstrap";
</style>

完成后，modal 应该会与 VueJS 3 一起工作。

结论

以上内容是解决 Bootstrap 5 modal 不工作 VueJS 3 的固定方法。通过在 VueJS 组件中正确导入并注册 Bootstrap，您将能够使用它的所有功能，包括弹出窗口。

在使用此方法时，务必要遵循上述步骤。如果您仍然遇到问题，请参阅 VueJS 和 Bootstrap 文档，以了解有关如何将二者集成到您的网站中的更多信息。