如何让sweetalert返回true / false以进行无保证的确认？

Question

我喜欢javascript确认的简单性，因此我可以这样做：

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

在sweetalert中，您必须将true代码嵌套在then Promise函数中。

是否有一种方法可以使sweetalert返回true/false，就像在JS确认中一样？

Answer 1

SweetAlert uses Promises通过设计来跟踪用户如何与基于HTML的警报进行交互，并且它是非阻塞的 （您仍然可以与网页/ UI进行交互），而不是浏览器的内置confirm()方法，该方法在显示模式窗口时会阻止用户访问程序界面的其余部分，直到关闭对话框< / strong>。

---

您不能以相同的界面阻止行为调用swal()，就好像它是另一种confirm()一样。 但是，通过使用ES2017 async / await功能，您可以以类似的方式编写代码并实际上实现相同的目标界面。

---

为了能够在浏览器中使用async / await，请使用编译器（例如Babel）来编译/转换您的源代码ES2015+ features至ES5，即widely supported：

-在swal()语句中使用if而不进行换行：

您可以简单地用swal(...)呼叫await：

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

使用SweetAlert作为truthy （{{1}，当用户确认警报时），Promise将解决或falsy < em>（否则为true 作为SweetAlert guides中所述的null语句的条件。

---

-在if语句中使用swal()和包装器来类似于if：

为了提供对confirm()的熟悉程度，请将带有所需选项的confirm()分离到async function中：

swal(...)

然后在以async function confirm(message) { return swal({ text: message, buttons: true }); } 开头的if语句中使用它，就好像它是await的形式一样，它也将按预期方式工作：

confirm()

---

注意事项：

• 在if (!await confirm('Are you sure?')) { return; } 之外使用await是currently not supported。要解决此问题，请将您的代码放在事件处理程序中：

  async function

  或使用document.addEventListener('DOMContentLoaded', async () => { // ... await and other async code here }); IFEE或IIAFE：

  async

• 为了轻松地转换包含ES2015 +功能的源代码，考虑使用工具或库来捆绑代码 （例如Webpack，{{3} }，Browserify，Gulp等）从长远来看。

---

具有快速设置的工作示例：

您可以根据Grunt在this repository中查看工作示例的来源。

完整披露：我制作存储库是为了提供一个易于使用的示例，可以对其进行克隆，通过NPM安装依赖项并立即开始使用。

---

其他资源：

• Webpack
• the confirm() method in the HTML Living Standard

Answer 2

我通过回调解决了

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

Answer 3

使用sweetalert2 v7.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
    }
});