sweetalert2: как использовать анимацию загрузчика при перенаправлении - PullRequest
Новая
       17

sweetalert2: как использовать анимацию загрузчика при перенаправлении

1 голос
/ 21 мая 2019

Использование sweetalert2 @ 8 для модальных диалогов.

Цель - перенаправить на URL-адрес, когда пользователь нажимает OK в диалоговом окне.Затем, пока происходит перенаправление, 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/"
  }
})

Результаты: Перенаправление работает, нодиалоговое окно исчезает сразу после нажатия кнопки ОК.

Как мы можем сохранить его видимым и показать анимацию загрузчика?

1 Ответ

1 голос
/ 22 мая 2019

В этом случае помогут два параметра: showLoaderOnConfirm и preConfirm.

Из официальных документов :

showLoaderOnConfirm

Установите значение true, чтобы отключить кнопки и показать, что что-то загружается. Используйте его в сочетании с параметром preConfirm.

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>
...