SweetAlert1和2的一点小区别

编程开发 每天学 来源:原创 7个月前 (03-22) 491次浏览

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

 


每天学 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:SweetAlert1和2的一点小区别
赞(4)
分享到: 更多 (0)