Materialize.toast只显示一次吐司。

Question

有谁知道有什么方法可以让吐司只显示一次？现在假设你一直点击一个按钮来显示吐司，它们会在前一个吐司过期之前一直叠加在一起。有点烦人。有什么办法吗？

Answer 1

有不同的方法可以实现这一点。

首先想到的是下面的方法.比如说你有一个触发你的吐司的功能。一旦敬酒被触发，设置一个全局标志（类似于 toastCurrentlyDisplayed = true)，并防止该函数在标志被设置为true的情况下再次打开吐司。即

myFunction() {
  if (!toastCurrentlyDisplayed) {
    //Logic to open your toast here
  }
}

然后简单地使用一个回调来重置标志 一旦吐司被关闭，就像...

<a class="btn" onclick="M.toast({html: 'I am a toast', completeCallback: function(){alert('Your toast was dismissed')}})">Toast!</a>

Answer 2

你可以在点击时隐藏吐司，然后使用条件的吐司。如

$("btn").click(function(e){
    $('.toast').hide();
    if(//some condn){
        Materialize.toast("Enter Your Text here",1500);

    }
});

这将隐藏所有的吐司，并在点击多次后只显示一次吐司。

Answer 3

我认为最好的方法是在创建新的吐司之前先删除所有的吐司，这对我来说很有效。

M.Toast.dismissAll();
           const toastHTML = `<span>${data.error}</span><button onClick='M.Toast.getInstance(this.parentElement).dismiss();' class="btn-flat toast-action"><i class="medium material-icons">clear</i></button>`;
            M.toast({html:toastHTML,classes:"#c62828 red darken-3 rounded"})

一个理想的吐司，有一个关闭按钮，只显示一次。