Bootstrap5 Toast 方法

下面是标准Bootstrap程序的Toast组件的方法

传递选项

我们还可以使用option对象将选项传递给 toast。

以下示例代码将阻止 toast 自动关闭。

document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myToast");
    var myToast = new bootstrap.Toast(element, {
        autohide: false
    });
});

尝试一下

以下示例代码会将 toast 的自动隐藏时间增加到 10 秒。

document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myToast");
    var myToast = new bootstrap.Toast(element, {
        delay: 10000
    });
});

尝试一下

show

此方法用于显示 Toast。

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myToast");

    // Create toast instance
    var myToast = new bootstrap.Toast(element);

    btn.addEventListener("click", function(){
        myToast.show();
    });
});

尝试一下

hide

这个方法是用来隐藏toast的。 如果将 autohide 设置为 false，则必须手动调用此方法。

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myToast");

    // Create toast instance
    var myToast = new bootstrap.Toast(element);

    btn.addEventListener("click", function(){
        myToast.hide();
    });
});

尝试一下

dispose

此方法隐藏元素的 toast。 Toast 将保留在 DOM 上，但不会再显示。

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myToast");

    // Create toast instance
    var myToast = new bootstrap.Toast(element);

    btn.addEventListener("click", function(){
        myToast.dispose();
    });
});

尝试一下

getInstance

这是一个静态方法，它允许我们获取与 DOM 元素关联的 toast 实例。

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myToast");

    btn.addEventListener("click", function(){        
        var myToast = bootstrap.Toast.getInstance(element);
        console.log(myToast);
        // {_element: div#myToast.toast.fade.show, _config: {…}, _timeout: null, _hasMouseInteraction: false, _hasKeyboardInteraction: false}
    });
});

尝试一下

getOrCreateInstance

这是一种静态方法，它允许我们获取与 DOM 元素关联的 toast 实例，或者在 toast 未初始化的情况下创建一个新实例。

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myToast");

    btn.addEventListener("click", function(){        
        var myToast = bootstrap.Toast.getOrCreateInstance(element);
        console.log(myToast);
        // {_element: div#myToast.toast.fade.show, _config: {…}, _timeout: null, _hasMouseInteraction: false, _hasKeyboardInteraction: false}
    });
});

尝试一下

**提示**：不能在类的实例（即对象）上调用静态方法。 他们被称为类本身。 关键字 static 用于为类定义静态方法。