Как заставить Sweetalert возвращать true / false для подтверждения без обещания? - PullRequest
Новая
       16

Как заставить Sweetalert возвращать true / false для подтверждения без обещания?

0 голосов
/ 04 июля 2018

Мне нравится простота javascript подтверждения, чтобы я мог сделать это: 

if(!confirm("are you sure?"))
    return;

в sweetalert Вы должны вложить свой код true в функцию обещания then.

Есть ли способ получить sweetalert return true/false так же, как это происходит в JS-подтверждении?

1 Ответ

0 голосов
/ 05 августа 2018

По своему дизайну SweetAlert использует Promises для отслеживания того, как пользователь взаимодействует с предупреждением на основе HTML, и он не блокирует (вы по-прежнему можете взаимодействовать с webpage / UI) в отличие от встроенного в браузер метода confirm(), который при отображении модального окна не позволяет пользователю получить доступ к остальная часть интерфейса программы до закрытия диалогового окна .

Вы не можете позвонить swal() с тем же поведением блокировки интерфейса, как если бы это был другой тип confirm(). Однако , используя ES2017 async / await, вы можете написать свой код аналогичным образом и практически достичь той же цели без блокировки интерфейса.

Чтобы иметь возможность использовать async / await в разных браузерах, используйте транспайлер (например, Babel ) для переноса / конвертации вашего исходный код с ES2015 + функциями до ES5 , что широко поддерживается :

- Использование swal() в операторе if без переноса:

Вы можете просто позвонить swal(...) с await: 

if (!await swal({text: 'Are you sure?', buttons: true})) {
    return;
}

И Promise разрешится при использовании SweetAlert как truey (true, когда пользователь подтвердит предупреждение) или falsy (null иначе) в качестве условия оператора if, как описано в Руководствах SweetAlert .

- Использование swal() в операторе if с оболочкой, похожей на confirm():

Чтобы обеспечить знакомство с confirm(), разделите swal(...) с желаемыми параметрами на async function: 

async function confirm(message) {
    return swal({
        text: message,
        buttons: true
    });
}

Затем используйте его в операторе if с префиксом await, как если бы он был просто как форма confirm(), и, таким образом, он также будет работать как положено: 

if (!await confirm('Are you sure?')) {
    return;
}

Что нужно учитывать:

  • Использование await вне async function означает , в настоящее время не поддерживается . Чтобы обойти эту проблему, либо поместите свой код в обработчик событий: 

    document.addEventListener('DOMContentLoaded', async () => {
    // ... await and other async code here
});

    или используйте async IFEE или IIAFE: 

    (async () => {
    // ... await and other async code here
})();

  • Чтобы легко переносить исходный код, содержащий функции ES2015 +, рассмотрите возможность использования инструмента или библиотеки для связывания вашего кода (например, Webpack , Browserify , Глоток , Ворчание и т. Д.) без особых усилий в долгосрочной перспективе.

Рабочий пример с быстрой настройкой:

Вы можете проверить источники рабочего примера в этом репозитории на основе Webpack .

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

Дополнительные ресурсы:

...