bootstrap5 toast 方法——迹忆客-ag捕鱼王app官网

下面是标准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 用于为类定义静态方法。