JS Sweetalert 2 基础用法讲解

导入Sweetalert 2

导入非常简单，代码如下：

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

PS:如果有新版的可以去网上下载最新版

基础Alert弹窗

Sweetalert 2 贴心的做了Alert函数.用法如下：

Swal.fire({
    title: '你好',
    text:"CSDN",
    type:"info",
    confirmButtonText: 'OK',
    confirmButtonColor: '#3085d6'
});

参数说明：

• title:标题（可选）
• text:内容（可选）
• type:图标类型，共四种（可选）
  1. info（信息，如下图 | 无动画）
  2. success（成功，图标是对号 | 有动画）
  3. error（错误，图标是叉号 | 有动画）
  4. warning（警号，图标是感叹号 | 无动画）
• confirmButtonText:按钮文本（可选，默认为#3085d6）
• confirmButtonColor:按钮颜色（可选，默认为蓝色）
• 当然，你也可以加入html参数，以便于添加表格、输入框等.

效果如下：

疑问弹窗

Sweetalert 2 也给我们做了疑问（YesNo）弹窗.用法如下：

Swal.fire({
    type: 'warning',
    title: '提交',
    text: "提交后将无法撤回，请谨慎操作！",            
    confirmButtonColor: '#3085d6',
    confirmButtonText: '确定',
    showCancelButton: true, 
    cancelButtonColor: '#d33', 
    cancelButtonText: "取消"
}).then((isConfirm) => {
    if (isConfirm.value) {
        Swal.fire("成功", "点击了确定", "success"); //这里可以缩写
    } else {
        Swal.fire("取消", "点击了取消", "error"); //这里可以缩写
    }
});

参数说明：

• type，title，text，confirmButtonColor，confirmButtonText和上面一样
• showCancelButton:显示取消按钮（必须选true，不然和Alert一摸一样）
• cancelButtonColor，cancelButtonText和confirmButtonColor，confirmButtonText一样，只不过更改的是取消按钮

效果如下:

.then 用法

用法如下：

Swal.fire({
    //Sweetalert弹窗参数，不多说
}).then((isConfirm) => {
    if (isConfirm.value) {
        //点了确定
    } else {
        //点了取消
    }
});

注意：Alert也可以使用.then

以上为Sweetalert 2基础语法讲解，请期待更新“JS Sweetalert 2 高级用法讲解”