Question

使用sweetalert2@8进行模式对话框。

目标是当用户在对话框中单击“确定”时重定向到URL。然后，在进行重定向时，sweet_alert必须保持打开状态尽可能长，同时它会显示加载动画。

尝试了以下内容：

swal.fire({
  title: "my title",
  type: "warning",
  html: "my body text",
  showCancelButton: true,
  showLoaderOnConfirm: true,
  closeOnConfirm: false,
}).then((result) => {
  if(result.value)
  {
      window.location.href = "/target_location/"
  }
})

结果：重定向有效，但是当按下OK按钮时，对话框立即消失。

我们如何保持它可见并显示加载程序动画？

Answer 1

在这种情况下，两个参数将有所帮助：showLoaderOnConfirm和preConfirm。

来自official docs：

showLoaderOnConfirm

设置为true可禁用按钮并显示正在加载内容。与preConfirm参数结合使用。

预先确认

要在确认之前执行的功能可能是异步的（承诺返回）或同步的

由于您希望永不停止的“无限”加载程序（浏览器重新加载将更新页面），因此需要在preConfirm()中返回永不解决的承诺：

Swal.fire({
  showLoaderOnConfirm: true,
  preConfirm: function (value) {
    location.assign('https://google.com')
    return new Promise( resolve => {} ) // never-resolving promise
  },
})

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

sweetalert2：如何在重定向时具有加载器动画

1 个答案: