SweetAlert1和2的一点小区别

791次阅读

SweetAlert1和2代码上有一点小区别，比如在1里面实现弹窗->确认->一个新的弹窗（内有文本框）->确认，说白是一个邮箱绑定功能，代码如下：

swal("绑定邮箱", "为了方便使用邮箱登录，我们墙裂推荐您绑定邮箱", {
    content: {
        element: "input",
        attributes: {
            placeholder: "请输入您的邮箱",
            type: "text",
        },
    },
    buttons: ["以后再说", "立刻绑定"],
    dangerMode: true,
}).then((value) = >{
    if (value) {
        if (isemail(`$ {
            value
        }`)) {
            ajax.post("<?php echo admin_url('admin-ajax.php'); ?>", `action = bind_email_check & email = $ {
                value
            }`,
            function(n) {
                if (n == 1) {
                    swal("邮箱绑定错误", "您输入的邮箱已被绑定，请更换邮箱或者联系管理员，谢谢", {
                        icon: "error",
                        dangerMode: true
                    });
                } else {
                    setCookie('bind', 1, 50);
                    weauth_auto_login(n, `$ {
                        value
                    }`);
                }
            });
        } else {
            swal("邮箱输入错误", "您输入的邮箱格式错误，请重新扫码绑定，谢谢", {
                icon: "error",
                dangerMode: true
            });
            weauth_auto_login(n);
        }
    } else {
        weauth_auto_login(n);
    }
});

但是在SweetAlert中，没有swal方法了，取而代之的是Swal.fire()，用法如下：

Swal.fire({
  title: '绑定邮箱',
  text: '为了方便使用邮箱登录，我们墙裂推荐您绑定邮箱',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: '绑定',
  cancelButtonText: '暂时不用'
}).then(result => {
  if (result.value) {
    Swal.fire({
      title: '输入你的邮箱',
      input: 'text',
      inputAttributes: {
        autocapitalize: 'off'
      },
      showCancelButton: false,
      confirmButtonText: '绑定',
      showLoaderOnConfirm: true,
      preConfirm: login => {
        return fetch(`${Mtx.ajax_url}?action=bind_email_check&email=${login}`)
          .then(response => {
            if (!response.ok) {
              throw new Error(response.statusText)
            }
            return response, login
          })
          .catch(error => {
            Swal.showValidationMessage(`Request failed: ${error}`)
          })
      },
      allowOutsideClick: () => !Swal.isLoading()
    }).then((result, login) => {
      if (result == 1) {
        swal('邮箱绑定错误', '您输入的邮箱已被绑定，请更换邮箱或者联系管理员，谢谢', {
          icon: 'error',
          dangerMode: true
        })
      } else {
        // setCookie('bind', 1, 50)
        weauth_auto_login(result, `${login}`)
      }
    })
  }
})

发表于：编程开发

2020-03-22

# SweetAlert