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

小灰灰 2021-07-04 16:06 1378阅读 0赞

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

**1. 带有 确定和取消的 弹框**  
![在这里插入图片描述][20201111211648269.png]

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

![在这里插入图片描述][20201111211814929.png]

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.  带有 确定和取消的 弹框  
    ![20201111212720872.png][]

2.带有 展示 标签内容 的弹框  
![在这里插入图片描述][20201111212753932.png]

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,//右上角关闭
    })

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

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

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

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

1.  右上角 通知类 弹窗  
    ![20201111212830829.png][]

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

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

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

[20201111211648269.png]: /images/20210704/8aac5e35109e43acbe0000c954b0a552.png
[20201111211814929.png]: /images/20210704/c10e257b692c47fb8dd90b7a4af086c5.png
[20201111212720872.png]: /images/20210704/80fb5e14a8d1467bb3b4b9ceb8384300.png
[20201111212753932.png]: /images/20210704/5d0450b5148546709a095519de95cac9.png
[20201111212830829.png]: /images/20210704/e793b9d861554812b995e4e7505f69ef.png