如何在 Bootstrap 5 中使用 popperjs 使下拉菜单工作

Question

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

我尝试了以下方法。

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

import { createPopper } from '@popperjs/core'

import '@popperjs/core'

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

Answer 1

您尝试使用 bootstrap.js 文件了吗？

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

require('bootstrap');

安装时会用到这个文件laravel ui

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

How to make dropdown menus work using popperjs in Bootstrap 5