在 Vue 3 中使用 Bootstrap 5

Question

我想在 Vue 3 中使用 Bootstrap 5。由于 Bootstrap 5 使用 vanilla JS（没有 JQuery），我可以直接在 Vue 3 项目中使用 Bootstrap 5（不使用 Bootstrap-Vue）吗？有人可以指导我如何在 Vue 3 中使用 Bootstrap 5 吗？

Answer 1

Bootstrap 5 不再需要 jQuery，因此它更容易与 Vue 一起使用，并且不再需要像 bootstrap-vue 这样的库。

使用 npm install 或通过将引导程序添加到package.json.

npm install --save bootstrap

接下来，将 Bootstrap CSS 和 JS 组件添加到 Vue 项目入口点（即：src/main.js）...

import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"

然后，使用 Bootstrap 组件的最简单方法是通过data-bs-属性。例如，这里是 Bootstrap Collapse 组件...

        <button class="btn btn-primary" 
            data-bs-target="#collapseTarget" 
            data-bs-toggle="collapse">
            Bootstrap collapse
        </button>
        <div class="collapse py-2" id="collapseTarget">
            This is the toggle-able content!
        </div>

或者，您可以导入任何 Bootstrap 组件并将它们“包装”为 Vue 组件。例如，这里是 Popover 组件...

import { Popover } from bootstrap;

const popover = Vue.component('bsPopover', {
    template: `
        <slot/>
    `,
    props: {
        content: {
            required: false,
            default: '',
        },
        title: {
            default: 'My Popover',
        },
        trigger: {
            default: 'click',
        },
        delay: {
            default: 0,
        },
        html: {
            default: false,
        },
    },
    mounted() {
        // pass bootstrap popover options from props
        var options = this.$props
        var ele = this.$slots.default[0].elm
        new Popover(ele,options)
    },
})

   <bs-popover
        title="Hello Popover"
        content="This is my content for the popover!"
        trigger="hover">
        <button class="btn btn-danger">
           Hover for popover
        </button>
   </bs-popover>

演示

Answer 2

是的，您可以在没有 Bootstrap-Vue 的情况下使用 Bootstrap。使用 npm 安装这两个包：

npm install --save @popperjs/core bootstrap@next

将 Bootstrap 导入 src/main.js：

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";

Vue 模板的示例用法：

<div class="dropdown">
    <button
      class="btn btn-secondary dropdown-toggle"
      type="button"
      id="dropdownMenuButton1"
      data-bs-toggle="dropdown"
      aria-expanded="false"
    >
      Check Bootstrap
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>

结果：

Answer 3

虽然 Bootstrap CSS 可以与任何框架（React、Vue、Angular 等）一起使用，但Bootstrap JavaScript并不与它们完全兼容。

\n

这是Bootstrap 5 文档的官方推理：

\n

\n

虽然 Bootstrap CSS 可以与任何框架一起使用，但 Bootstrap JavaScript 与 React、Vue 和 Angular 等 JavaScript 框架并不完全兼容，这些框架假定完全了解 DOM。Bootstrap 和框架都可能会尝试改变相同的 DOM 元素，从而导致出现诸如卡在 \xe2\x80\x9copen\xe2\x80\x9d 位置的下拉菜单之类的错误。

\n

\n

文档指出使用替代的特定于框架的包而不是 Bootstrap JavaScript，例如React Bootstrap、BootstrapVue和ng-bootstrap。

\n

不幸的是，BootstrapVue 仅兼容 Vue2/Nuxt2，尚无适用于 Vue3/Nuxt3 的版本。

\n

Answer 4

It's easy to implement this once you understand how Bootstrap modals work. Bootstrap modals have a div element with a class of modal fade. When it is triggered, this element gets the show and d-block class as well. In addition, the body tag gets an additional class of modal-open. When the modal is closed, this process is reversed. Understanding this, we can easily implement Bootstrap 5 modals in one's code:

Import Bootstrap 5's CDN in your code. Add both the CSS and JS to your code.

Our sample Single Page Component will look like this:

<template>
<div>  
    <p>Test modal<a href="#" @click="modalToggle">now</a></p>
    <div>
        <button type="button" class="btn btn-primary" @click="modalToggle">My Modal</button>
            <div
            ref="modal"
            class="modal fade"
            :class="{ show: active, 'd-block': active }"
            tabindex="-1"
            role="dialog">
            <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button
                    type="button"
                    class="close"
                    data-dismiss="modal"
                    aria-label="Close"
                    @click="modalToggle">
                    <span aria-hidden="true">&times;</span>
                </button>
                </div>
                <div class="modal-body">
                <p>Modal body text goes here.</p>
                </div>
            </div>
            </div>
        </div>
        <div v-if="active" class="modal-backdrop fade show"></div>
        </div>
</div>
</template>

Here we are using the basic Bootstrap 5 modal.

<script>
export default {
data() {
    return {
    active: false,
    }
},
methods: {
    modalToggle() {
    const body = document.querySelector("body")
    this.active = !this.active
    this.active ? body.classList.add("modal-open") : body.classList.remove("modal-open")
    },
},
}
</script>

Here, we have a variable active which is initially set false. So modal will not show up on page load. On clicking a link, we use a method to toggle this variable. This will remove the show attribute and the d-block class from our modalm and remove the modal-open property from the body tag.