如何在没有承诺的情况下让 sweetalert return true/false 进行确认？

Question

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

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

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

有没有办法让 sweetalert return true/false 以与在 JS 中发生的方式相同的方式确认？

Answer 1

根据设计，SweetAlert uses Promises to keep track of how the user interacts with the HTML-based alert and it's non-blocking (you can still interact with the webpage/UI) as opposed to the browser's built-in confirm() 方法，当显示模态 window 时， 它会阻止用户访问程序界面的其余部分，直到对话框关闭.

您不能调用swal() with the same interface-blocking behavior, as if it were another type of confirm(). However, by using the ES2017 async/await功能，您可以用类似的方式编写代码并实际实现相同的目标不阻塞界面。

为了能够跨浏览器使用 async/await，请使用转译器 （例如 Babel) to transpile/convert your source code with ES2015+ features to ES5, which is widely supported:

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

你可以简单地调用 swal(...) 和 await:

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

并且 Promise 将解析，当使用 SweetAlert 时 truthy (true, when the user confirms the alert) or falsy (null otherwise) as the condition of the if statement as described in the SweetAlert guides。

- 在带有类似于 `confirm()`:

的包装器的 if 语句中使用 swal()

为了提供 confirm() 的熟悉度，将 swal(...) 与所需的选项分开到 async function:

async function confirm(message) {
    return swal({
        text: message,
        buttons: true
    });
}

然后在前缀为 await 的 if 语句中使用它，就好像它就像 confirm() 的一种形式一样，因此，它也会按预期工作：

if (!await confirm('Are you sure?')) {
    return;
}

需要考虑的事项：

在 async function 之外使用 await 是。要解决此问题，请将您的代码放在事件处理程序中：

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

或使用 async IFEE or :

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

为了轻松转换包含 ES2015+ 功能的源代码，考虑使用工具或库来捆绑您的代码 （例如 Webpack, Browserify, Gulp, Grunt,等)长运行.

快速设置的工作示例：

您可以在 this repository based on Webpack 中查看工作示例的源代码。

完全公开：我创建存储库是为了提供一个易于使用的示例，可以克隆它，通过 NPM 安装依赖项并立即开始使用。

其他资源：

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

Answer 4

与表单提交事件一起使用

HTML

<form onsubmit="confirmFormAlert(this); return false">
...
</form>

JAVASCRIPT

const confirmFormAlert = async function (form) {
    const sweetConfirm = await swal({
        title: "Confirm",
        buttons: true
    });
    if (sweetConfirm) {
        form.submit();
    }
    return sweetConfirm;
}

如何在没有承诺的情况下让 sweetalert return true/false 进行确认？

How to have sweetalert return true/false for confirm without promise?

javascript

sweetalert

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

- 在带有类似于 confirm():

需要考虑的事项：

快速设置的工作示例：

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

- 在带有类似于 `confirm()`: