Toast 未显示 Bootstrap 5 个模块

Question

我正在尝试仅使用 Bootstrap 5 和带有模块的普通 JS 创建一个网站，但我在使用 Bootstrap Toast 时遇到了问题。我已经成功创建了实例，但是当我调用函数显示时，没有任何反应。

我有一个模块导入了 returns 这个 bootstrap 元素： import toast from "../../components/toast/toast.js";

当我调用 toast() 时 returns 这个 HTML 元素：

<div aria-atomic="true" aria-live="assertive" 
     class="toast" role="alert">
    <div class="toast-header">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
        <button aria-label="Close" class="btn-close" 
                data-bs-dismiss="toast" type="button">
        </button>
    </div>
    <div class="toast-body">
        Hello, world! This is a toast message.
    </div>
</div>

我正在使用 bootstrap 作为模块：import { Toast } from '../../plugins/bootstrap-5.0.0-beta1-dist/js/bootstrap.esm.js'

然后像这样创建我的吐司：

    const toastEl = toast();
    const myToast = new Toast(toastEl);
    myToast.show();

在调试中，我可以看到我的实例'myToast' returns如下。

Toast {_element: div.toast, _config: {…}, _timeout: null}config: {animation: true, autohide: true, delay: 5000}element: div.toast_timeout: null__proto: BaseComponent

Answer 1

确保从 toast() 返回的 toastEl 附加到 DOM...

var toastEl = toast();
document.body.appendChild(toastEl)
const myToast = new Toast(toastEl);
myToast.show();

https://codeply.com/p/E1wLnVcX0J

Read more on using Bootstrap 5 with React

Toast 未显示 Bootstrap 5 个模块

Toast not showing up Bootstrap 5 with modules

html

javascript

bootstrap-5