单击确认 HTML 不适用于 Sweetalert2，但它适用于本机浏览器确认

Question

当我使用本机 confirm() 时，它工作正常，但使用 Sweeetalert2 时它不起作用，有人能帮忙吗？

我不知道为什么它根本不起作用。但是这里的错误来自 Sweetalert2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button onclick="confirm('Sure?') && console.log('Work!')">Work fine</button>

    <button onclick="confirmation() && console.log('Work!')">Didn't work</button>


    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

    <script>
        window.confirmation = function () {
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it!',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    return true;
                }
            });
        };
    </script>
</body>

</html>

Answer 1

它工作得很好，你会得到一个可爱的弹出窗口，当用户做出适当的选择时，结果将 return true。但是你的期望是错误的。

您期望 confirmation return 是一个真实值，但事实并非如此。当前，您定义的 confirmation 方法 returns undefined，因为您没有定义 return 类型。

因此 confirmation() && console.log('works')，根本行不通，因为您正在 returning undefined（这是虚假的）。

所以说您要将 confirmation 方法更改为 return Swal.fire 的调用？那么您当前的处理仍然无法正常工作，因为您现在 return a Promise，这是真实的，但可能 ¹ 未解决。

但是，由于您需要在当前状态下处理请求的结果，这是最安全的选择，因此我们可以将 confirmation 代码更改为：

window.confirmation = function () {
  return Swal.fire({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#d33',
    cancelButtonColor: '#3085d6',
    confirmButtonText: 'Yes, delete it!',
    reverseButtons: true
  }).then( result => result.isConfirmed );
};

此时您的代码仍然无法“工作”。如果您现在单击 link，您会看到 Work! 在您打开弹出窗口后立即登录到控制台。原因就是我在上面用承诺是真实的解释。一旦您单击 link，promise 得到 returned，是真实的并且语句被打印到控制台，但是用户没有决定还。

那么如何处理这个问题，您可以看到 sweetalert2 弹出窗口作为其样板代码的一部分的 Promise 链。它会触发一个事件，并且在未来的某个时刻，如果用户进行了一个操作，那么该操作将由 promise 链解决。

在最后的代码中，我们将其更改为 return 为 result.isConfirmed，因此最终 return 为 true 或 false，但是这是您尚未处理的情况。你很久以前触发的事件早就完成了它的动作，所以那里没有人更聪明。

要处理这个问题，您需要添加自己与承诺链的交互，并在代码中添加 then 语句，如下所示：

<button onclick="confirmation().then( confirmed => confirmed && console.log('Work!') )">
  Didn't work
</button>

这复制了早期的逻辑。如果你检查它，它是这样的：

confirmation() 从 sweetalert 创建承诺，显示消息框并 returning 一个未解决的承诺
您将自己附加到承诺链的末端
用户点击Yes, delete it
then 内链确认 return 是你 result.isConfirmed
您的按钮内的 then 链被调用，confirmed 是 promise 链内先前 return 值的结果
确认后打印消息

所以最后，您会得到以下代码段的更改

window.confirmation = function() {
  return Swal.fire({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#d33',
    cancelButtonColor: '#3085d6',
    confirmButtonText: 'Yes, delete it!',
    reverseButtons: true
  }).then( result => result.isConfirmed );
};

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<button onclick="confirm('Sure?') && console.log('Work!')">Work fine</button>
<button onclick="confirmation().then( confirmed => confirmed && console.log('Work!') )">Didn't work</button>

¹_{在这种情况下实际上是未解决的，因为在您单击其中一个按钮之前承诺不会解决，此时它会解决}

Answer 2

对我有用：

Swal.fire({
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes, delete it!'
 }).then((result) => {
   if (result.value == true) {
        alert("do delete");
   } else {
        alert("do not delete");
   }
 });

单击确认 HTML 不适用于 Sweetalert2，但它适用于本机浏览器确认

Confirm on click HTML didn't work with Sweetalert2 but it's work with native browser confirm

javascript

sweetalert

sweetalert2