时间戳

首页 > 解决方案 > Toast 没有显示带有模块的 Bootstrap 5

javascript - Toast 没有显示带有模块的 Bootstrap 5

问题描述

我正在尝试仅使用 Bootstrap 5 和带有模块的 vanilla JS 创建一个网站，但我在使用 Bootstrap Toast 时遇到了问题。我已经成功创建了实例，但是当我调用函数来显示时，什么也没有发生。

我有一个导入的模块返回这个引导元素： import toast from "../../components/toast/toast.js";

当我调用toast()它时，它会返回这个 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>

我将引导程序用作模块：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”返回以下内容。

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

标签： javascripthtmlbootstrap-5

解决方案

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

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

https://codeply.com/p/E1wLnVcX0J

阅读更多关于使用带有 React 的 Bootstrap 5

推荐阅读