如何配置SweetAlert实现仅点击Done按钮跳转、点击弹窗外部不跳转

问题原因 #

现有代码未区分弹窗的关闭触发场景，SweetAlert 默认的 then 回调会在所有弹窗关闭场景下触发，无论点击确认按钮、点击弹窗外部空白区域还是按下 ESC 键关闭弹窗都会进入回调逻辑。

解决方案 #

通过 then 回调的返回值判断触发场景：当用户点击「Done」按钮时，回调会收到 true 值；当用户点击外部区域或按 ESC 关闭弹窗时，回调会收到 null 值，仅在返回值为真时执行跳转即可。

修正后代码： #

import swal from "sweetalert";

swal({
  title: "Good job!",
  icon: "success",
  button: "Done",
  type: "success",
  // 若需要完全禁止点击外部/按ESC关闭弹窗，可开启下方两个配置
  // closeOnClickOutside: false,
  // closeOnEsc: false,
}).then((isConfirm) => {
  if (isConfirm) {
    history.push("/email_template");
  }
});

内容的提问来源于stack exchange，提问作者Yogita Suresh Taluja