Vue.js フロントエンド Web ページ ポップアップ非同期動作例の分析

showDialog(コンテンツ、タイトル、{
    closed: function() { console.log("ダイアログボックスが閉じられました"); }
})

非同期関数 asyncShowDialog(コンテンツ、タイトル、オプション) {
    新しいPromiseを返します(resolve => {
        showDialog(コンテンツ、タイトル、{
            ...オプション、
            終了: 解決済み
        });
    });
}
 
(非同期() => {
    asyncShowDialog(コンテンツ、タイトル) を待機します。
    console.log("ダイアログ ボックスが閉じられました");
})();

モーダル.確認({
    ...
    オンOK() {
        // 「OK」ボタンをクリックすると、読み込みアニメーションが表示され、1秒後にダイアログボックスが閉じられます return new Promise(resolve => {
            タイムアウトを設定します(解決、1000);
        });
    }
    ...
});

試す {
    ElMessageBox.confirm(...) を待機します。
    // ここで処理するにはOKボタンを押します} catch(err) {
    // キャンセルボタンの押下はここで処理されます }

試す {
    ElMessageBox.confirm({を待つ
        ...
        beforeClose: async (アクション、インスタンス、完了) => {
            新しい Promise(resolve => setTimeout(resolve, 1000)) を待機します。
            終わり（）;
        }
    });
    // ここで処理するにはOKボタンを押します} catch(err) {
    // キャンセルボタンの押下はここで処理されます }

<div class="ダイアログ" id="ダイアログテンプレート">
  <div class="ダイアログウィンドウ">
    <div class="dialog-title">ダイアログボックスのタイトル</div>
    <div class="dialog-content">ダイアログコンテンツ</div>
    <div class="ダイアログ操作">
      <button type="button" class="ensure-button">確認</button>
      <button type="button" class="cancel-button">キャンセル</button>
    </div>
  </div>
</div>

$("#dialogTemplate").clone().removeAttr("id").appendTo("body").show();

関数 showDialog(コンテンツ, タイトル) {
    定数 $dialog = $("#dialogTemplate").clone().removeAttr("id"); 
    // ダイアログ ボックスのタイトルと内容を設定します (簡単な例なので、テキストのみを処理します)
    $dialog.find(".dialog-title").text(タイトル);
    $dialog.find(".dialog-content").text(コンテンツ); 
    // イベント プロキシ経由で (またはプロキシなしで) 2 つのボタン イベントを処理します $dialog
        .on("クリック", ".ensure-button", () => {
            ダイアログを削除します。
        })
        .on("クリック", ".cancel-button", () => {
            ダイアログを削除します。
        }); 
    $dialog.appendTo("body").show();
}

関数 showDialog(...) {
    ... 
    定数を破棄 = () => {
        $dialog.fadeOut(200, () => $dialog.remove());
    }; 
    $ダイアログ
        .on("クリック", ".ensure-button", 破棄)
        .on("クリック", ".cancel-button", 破棄); 
    $dialog.appendTo("body").fadeIn(200);
}

関数 showDialog(...) {
    ... 
    const promise = new Promise((resolve, deny) => {
        $ダイアログ
            .on("クリック", ".ensure-button", () => {
                破壊する（）;
                解決します("OK");
            })
            .on("クリック", ".cancel-button", () => {
                破壊する（）;
                拒否("キャンセル");
            });
    }); 
    $dialog.appendTo("body").fadeIn(200);
    promise() を返します。
}

関数 showDialog(...) {
    ...
    定数を破棄 = () => {
        新しいPromiseを返します(resolve => {
            $dialog.fadeOut(200, () => {
                ダイアログを削除します。
                解決する（）;
            });
        });
    };
     const promise = new Promise((resolve, deny) => {
        $ダイアログ
            .on("クリック", ".ensure-button", 非同期() => {
                破棄を待ちます。
                解決します("OK");
            })
            .on("クリック", ".cancel-button", 非同期() => {
                破棄を待ちます。
                拒否("キャンセル");
            });
    }); 
    ...
}

関数 showDialog(コンテンツ、タイトル、オプション = {}) { ... }

$ダイアログ
    .on("クリック", ".ensure-button", 非同期() => {
        const { onOk } = オプション;
        // オプションから onOk を取得します。関数の場合は、処理を待つ必要があります if (typeof onOk === "function") {
            定数 r = onOk();
            // onOk() の結果が Promise のようなオブジェクトかどうかを判定します // Promise のようなオブジェクトのみが非同期待機を必要とします if (typeof r?.then === "function") {
                定数 $button = $dialog.find(".ensure-button");
                // 非同期の待機プロセス中に、ユーザーに何らかのフィードバックを提供する必要があります // ここでは面倒なので、読み込みアニメーションは使用せず、フィードバックにはテキストのみを使用します $button.text("処理中...");
                rを待つ;
                // 完了後、閉じる前に 200 ミリ秒のフェードアウト プロセスがあるため、
                // したがって、ユーザーにタイムリーなフィードバックを提供するために、ボタンのテキストを「完了」に変更する必要があります $button.text("Done");
            }
        }
        破棄を待ちます。
        解決します("OK");
    })

const 結果 = showDialog を待機します(
    「こんにちは、これがダイアログボックスの内容です」
    「こんにちは」
    {
        onOk: () => 新しい Promise((resolve) => { setTimeout(resolve, 3000); })
    }
).catch(msg => msg); // ここでは、キャンセルによって発生した拒否が、try...catch... の使用を避けるために解決に変換されます。
 
console.log(result === "ok" ? "OKを押してください" : "キャンセルを押してください");

非同期関数 showDialog(コンテンツ、タイトル、オプション = {}) {
    ...
    
    if (options.type === "alert") {
        $dialog.find(".キャンセルボタン").remove();
    }    
    ...
}

showDialog(result === "ok" ? "OKを押してください" : "キャンセルを押してください", "プロンプト", { type: "alert" });

const dialog = showDialog("こんにちは、これがダイアログ ボックスの内容です", "こんにちはと言ってください");
// 処理関数をPromiseのonOkに挿入する
dialog.onOk = () => 新しい Promise((resolve) => { setTimeout(resolve, 3000); });
const 結果 = dialog.catch(msg => msg) を待機します。
showDialog(result === "ok" ? "OKを押してください" : "キャンセルを押してください", "プロンプト", { type: "alert" });