如何在 VueJS 2 中使用 Bootstrap 5 折叠组件？答案

【问题标题】：How to use Bootstrap 5 Collapse Component in VueJS 2?如何在 VueJS 2 中使用 Bootstrap 5 折叠组件？
【发布时间】：2021-10-30 09:38:25
【问题描述】：

我正在尝试在按钮上使用 Bootstrap 5 的 "collapse" component，但我不确定如何在 VueJS2 中实际使用它

我有一个像这样的单个文件组件：

<template> 部分：

          <button
            class="btn btn-danger"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#collapseExample"
            aria-expanded="false"
            aria-controls="collapseExample"
          >
            Mark As Rejected
          </button>
          <div class="collapse" id="collapseExample">
            <div class="card card-body">
              Some placeholder content for the collapse component. This panel is
              hidden by default but revealed when the user activates the
              relevant trigger.
            </div>
          </div>

<script> 部分：

<script>
import Collapse from 'bootstrap/js/dist/collapse'
export default {
    ...
    methods: {
        // how to manually enable the collapse via JavaScript???
    }
}
    ...
</script>

使用原生 JavaScript 的 Bootstrap docs had an example...但是如何使用 VueJS 来做到这一点？

Bootstrap 5 折叠原生 JavaScript 示例：

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

【问题讨论】：

标签： javascript vuejs2 bootstrap-5

【解决方案1】：

我只是想多了。

为了在带有 HTML 数据属性的 VueJS 单文件组件中使用 Collapse，我所要做的就是简单地导入 Collapse 文件，如下所示：

import 'bootstrap/js/dist/collapse'

这也将允许轻松摇树，因为我只需要在需要时导入脚本。

【讨论】：

【解决方案2】：

有很多方法可以做到。在 Vue 方法中使用 Bootstrap JS 的最简单方法。比如……

    mounted() {
        this.openCollapse()
    },
    methods: {
        openCollapse() {
            var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
            var collapseList = collapseElementList.map(function (collapseEl) {
              var bsCollapse = new bootstrap.Collapse(collapseEl)
              bsCollapse.show()
            })
        }
    }

Demo

或者，您可以将 Bootstrap Collapse 组件转换为可重用的 Vue 组件...

const collapse = Vue.component('bsCollapse', {
    template: `
        <div>
            <slot name="trigger"></slot>
            <slot name="target"></slot>
        </div>
    `,
    props: {
        toggle: {
            required: false,
            default: false
        },
        id: {
            required: true
        }
    },
    mounted() {
        var trigger = this.$slots['trigger'][0].elm
        var target = this.$slots['target'][0].elm
        target.classList.add('collapse')
        target.setAttribute('id', this.id);
        trigger.setAttribute('data-bs-target', '#' + this.id);
        trigger.setAttribute('data-bs-toggle','collapse');
        new Collapse(target, {toggle: this.toggle })
    },
})

然后像...一样使用它

    <bs-collapse id="collapse1">
            <button class="btn btn-info" slot="trigger">
                Bootstrap collapse
            </button>
            <div slot="target">Toggle the display of this collapsible content!</div>
    </bs-collapse>

另见：Using Bootstrap 5 with Vue 3

【讨论】：

【解决方案3】：

我自己也遇到过这个问题，就这样解决了

安装“@popperjs/core”和“bootstrap”

{
    "devDependencies": {

        ....
        
        "@popperjs/core": "^2.10",
        "bootstrap": "^5.1.3"
    }
}

导入类

import { Collapse } from 'bootstrap'

通过类“navbar-collapse”将“ref”添加到元素

ref="menuCollapse"

带参数调用类

new Collapse(this.$refs.menuCollapse, { toggle: false })

完整的组件代码示例

<template>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <button
                class="navbar-toggler"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbarTogglerDemo01"
                aria-controls="navbarTogglerDemo01"
                aria-expanded="false"
                aria-label="Toggle navigation"
            >
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">Foo brand</a>
            <div ref="menuCollapse" class="collapse navbar-collapse" id="navbarTogglerDemo01" >
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Bar</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Bas</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</template>

<script>
import { Collapse } from 'bootstrap'

export default {
    mounted() {
        // eslint-disable-next-line no-new
        new Collapse(this.$refs.menuCollapse, { toggle: false })
    },
}
</script>

【讨论】：