javascript - Sweet Alert，但按钮在前几秒内被禁用

Question

我正在创建一个显示非常重要消息的 Sweet Alert，我不希望用户未阅读就关闭它。

因此，为了强调该消息的重要性，我想将“确定”按钮禁用(比方说...)5 秒，这样用户必须至少等待 5 秒才能解除警报。

可见的计时器也很不错。我在我的应用程序中使用 AngularJS。

为此，我可以很容易地制作一个自定义模式作为警报，但我想使用 Sweet Alert 的原因是因为它已经在我的整个应用程序中使用，我不想打破这种模式。

Answer 1

您可以使用 SweetAlert2 中的可用内容来实现它已经。正如 Joseph 在另一个答案中提到的，您应该将以下 sweetalert2 属性设置为 false 以避免用户关闭模式:

allowOutsideClick: false,
allowEscapeKey: false, 

然后您可以在显示 swal 时隐藏确认按钮:

onOpen: () => {
  swal.showLoading()
  ....
}

然后在一段时间后使用 setTimeout 再次显示确认按钮:

onOpen: () => {
  swal.showLoading()
  setTimeout(() => { swal.hideLoading() }, 5000)
}

swal 的完整代码是:

swal({
  title: 'Please read this message!',
  allowOutsideClick: false,
  allowEscapeKey: false, 
  onOpen: () => {
    swal.showLoading()
    setTimeout(() => { swal.hideLoading() }, 5000)
  },
}).then((result) => {
  if (!result.dismiss) {
     console.log('user read the important message')
  }
})