如何解决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: {动画:真,自动隐藏:真,延迟:5000}元素: div.toast_timeout: null__proto: BaseComponent
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。