SweetAlert 2 全网最详细的使用方法

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

1. 带有 确定和取消的 弹框

Swal.fire({
    type: 'warning', // 弹框类型
    title: '注销帐号', //标题
    text: "注销后将无法恢复，请谨慎操作！", //显示内容            

    confirmButtonColor: '#3085d6',// 确定按钮的 颜色
    confirmButtonText: '确定',// 确定按钮的 文字
    showCancelButton: true, // 是否显示取消按钮
    cancelButtonColor: '#d33', // 取消按钮的 颜色
    cancelButtonText: "取消", // 取消按钮的 文字

    focusCancel: true, // 是否聚焦 取消按钮
    reverseButtons: true  // 是否 反转 两个按钮的位置 默认是  左边 确定  右边 取消
}).then((isConfirm) => {
    try {
        //判断 是否 点击的 确定按钮
        if (isConfirm.value) {
            Swal.fire("成功", "点击了确定", "success");
        }
        else {
            Swal.fire("取消", "点击了取消", "error");
        }
    } catch (e) {
        alert(e);
    }
});

Swal.fire({
            title: '领取你的寻龙装备！',
            input: 'select',
            html:
                '<input id="swal-input1" class="swal2-input">' +
                '<input id="swal-input2" class="swal2-input">',
            inputAttributes: {
                autocapitalize: 'off'
            },
            showCancelButton: true,
            confirmButtonText: 'Look up',
            showLoaderOnConfirm: true,
            preConfirm: (login) => {
                return fetch(`//api.github.com/users/${login}`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(response.statusText)
                        }
                        return response.json()
                    })
                    .catch(error => {
                        Swal.showValidationMessage(
                            `Request failed: ${error}`
                        )
                    })
            },
            allowOutsideClick: () => !Swal.isLoading()
        }).then((result) => {
            if (result.value) {
                Swal.fire({
                    title: `${result.value.login}'s avatar`,
                    imageUrl: result.value.avatar_url
                })
            }
        })

---

1. 带有 确定和取消的 弹框
   

Swal.fire({
    type: 'warning', // 弹框类型
    title: '注销帐号', //标题
    text: "注销后将无法恢复，请谨慎操作！", //显示内容            

    confirmButtonColor: '#3085d6',// 确定按钮的 颜色
    confirmButtonText: '确定',// 确定按钮的 文字
    showCancelButton: true, // 是否显示取消按钮
    cancelButtonColor: '#d33', // 取消按钮的 颜色
    cancelButtonText: "取消", // 取消按钮的 文字

    focusCancel: true, // 是否聚焦 取消按钮
    reverseButtons: true  // 是否 反转 两个按钮的位置 默认是  左边 确定  右边 取消
}).then((isConfirm) => {
    try {
        //判断 是否 点击的 确定按钮
        if (isConfirm.value) {
            Swal.fire("成功", "点击了确定", "success");
        }
        else {
            Swal.fire("取消", "点击了取消", "error");
        }
    } catch (e) {
        alert(e);
    }
});

2.带有 展示 标签内容 的弹框

var content = "无记录";
var msg=""; //msg 是从外面传入的数据

if (msg) {

    content = "<p style='color: red'>最近一次操作后的5小时内有效</p> "
        + "<p>可以使用 Ctrl +F 查找关键字</p>"
        + "<table class='table_list'>"
        + "<tr>"
        + "     <th class='js_tr_data'> 时间</th> <th>名称</th> <th>密码</th>"
        + "</tr>"
        + msg
        + "</table>"
}

Swal.fire({
    title: '<strong>记录</strong>',
    type: 'info',
    html: content, // HTML
    focusConfirm: true, //聚焦到确定按钮
    showCloseButton: true,//右上角关闭
})

3. 带有定位 和 消失时间的 弹框

Swal.fire({
  position: 'top-end', //定位 左上角
  type: 'success',
  title: 'Your work has been saved',
  showConfirmButton: false,
  timer: 1500
})

4. 自定义 第三方 css 的 弹框 (推荐使用 Animate.css )

Swal.fire({
  title: 'Custom animation with Animate.css',
  animation: false,
  customClass: 'animated tada'
})

5. 右上角 通知类 弹窗
   

Swal.fire({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000,
    type: 'success',
    title: 'Signed in successfully'
})

7. 如何 做 一个自己的 通用模版

//定义模版 (可多次使用)
var MyBox = Swal.mixin({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000
});

//调用
MyBox.fire({
    type: 'success',
    title: 'successfully'
});