Question

有没有人知道只展示一次敬酒的方法？现在让我们说如果你一直点击一个按钮来显示祝酒词，他们就会在前一个过期之前一直堆叠在一起。有点烦人。有什么办法吗？

Answer 1

有不同的方法来实现这一目标。

首先想到的是以下内容。让我们说你有一个触发你祝酒的功能。一旦触发了toast，设置一个全局标志（类似toastCurrentlyDisplayed = true）并阻止该函数在标志设置为true时再次打开toast。即：

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

我认为最好的方法是在创建新的Toast之前先解开所有Toast，这对我很有用。

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"})

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

Materialise.toast只显示一次吐司

3 个答案: