web-dev-qa-db-ja.com

約束なしに確認するためにsweetalertにtrue / falseを返す方法は？

私はこれができるようにjavascriptconfirmの単純さが好きです：

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

sweetalertでは、trueコードをthenpromise関数内にネストする必要があります。

JSで確認するのと同じ方法でsweetalertにtrue/falseを返す方法はありますか？

javascriptsweetalert
6
boruchsiper

設計上、 SweetAlertはPromises を使用して、ユーザーがHTMLベースのアラートをどのように操作するかを追跡します。非ブロッキングです（引き続きWebページ/ UIを操作できます）ブラウザの組み込みの confirm() メソッドとは対照的に、モーダルウィンドウを表示するときにユーザーがプログラムの残りのインターフェイスにアクセスできないようにしますダイアログボックスが閉じるまで。

できませんswal() を、別のタイプのconfirm()であるかのように、同じインターフェイスブロック動作で呼び出すことができます。ただし、ES2017を使用することにより async / await 機能、同様の方法でコードを記述し、実質的に同じ目標を達成できますインターフェースをブロックせずに。

ブラウザ間でasync/awaitを使用できるようにするには、トランスパイラー（eg Babel ）を使用してソースコードを ES2015 +機能 から ES5 、これは 広くサポートされています ：

-ifステートメントでswal()をラップせずに使用する：

awaitを使用してswal(...)を呼び出すだけです。

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

そして、SweetAlertを truthy（Promise、ユーザーがアラートを確認したとき）または falsy _として使用すると、trueは解決されます。（nullそれ以外の場合）SweetAlertガイド で説明されているifステートメントの条件として。

-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;
}

考慮事項：

  • async functionの外でawaitを使用することは 現在サポートされていません です。この問題を回避するには、コードをイベントハンドラーに配置します。

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

    または、asyncIFEE または IIAFE ：

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

  • ES2015 +機能を含むソースコードを簡単にトランスパイルするには、ツールまたはライブラリを使用してコードをバンドルすることを検討してください（eg Webpack 、 Browserify 、 Gulp 、 Grunt など）長期的にはあまり労力をかけずに。

クイックセットアップの実例：

このリポジトリWebpack に基づく）で実際の例のソースを確認できます。

完全な開示：クローンを作成し、NPMを介して依存関係をインストールし、すぐに使用を開始できる、使いやすい例を提供するためにリポジトリを作成しました。

追加のリソース：

4
Rick

コールバックで解決しました：

function confirm(question, text, callback) {
 swal({
   title: question,
   text: text,
   buttons: true
  }).then((confirmed) => {
     if (confirmed) {
        callback();
      }
 });
}
0
user1915816

Sweetalert2v7.24.1の使用

便利な回避策。

関数

function sweetConfirm(title, message, callback) {
    swal({
        title: title,
        text: message,
        type: 'warning',
        showCancelButton: true
    }).then((confirmed) => {
        callback(confirmed && confirmed.value == true);
    });
}

使用法

sweetConfirm('Confirm action!', 'Are you sure?', function (confirmed) {
    if (confirmed) {
        // YES
    }
    else {
        // NO
    }
});
0
evilom