如何在 Bootstrap 5 中使用 popperjs 使下拉菜单工作 [关闭]答案

【问题标题】：How to make dropdown menus work using popperjs in Bootstrap 5 [closed]如何在 Bootstrap 5 中使用 popperjs 使下拉菜单工作 [关闭]
【发布时间】：2021-05-09 04:43:52
【问题描述】：

我目前正在尝试使下拉菜单在 Bootstrap 5 中工作。我读到此功能需要 Popper.js，但我不知道如何正确包含它（使用 Laravel 混合的 Laravel 项目）。

我尝试了以下方法。

window.Popper = require(“@popperjs/core”)

import { createPopper } from '@popperjs/core'

import '@popperjs/core'

这些似乎都没有启用我想要的 Bootstrap 下拉功能！我做错了什么？

【问题讨论】：

标签： javascript css laravel popper.js bootstrap-5

【解决方案1】：

您是否尝试过使用 bootstrap.js 文件？

window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');

require('bootstrap');

这个文件在你安装laravel ui时使用

【讨论】：

【解决方案2】：

以下将起作用，Popper.js 已弃用。安装版本 2...

npm i @popperjs/core

然后在你的 bootstrap.js 中...

try {
    window.Popper = require('@popperjs/core');
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {
}

最后，运行npm run dev 并在布局中包含以下内容...

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>

【讨论】：

.default 似乎未定义。只是window.Popper = require('@popperjs/core') 似乎是它。