SweetAlert 2中文文档

SweetAlert 2中文文档

提示：此文章仅仅提供参考如有问题，欢迎提出

---

---

前言

例如：在众多前端弹出组件中，这个文章介绍SweetAlert 2。英文介绍git链接

---

一、SweetAlert2是什么？

SweetAlert2是一个优秀的JavaScript插件,用于自定义弹出框。

二、使用步骤

1.引入项目

方式1.项目安装

npm install sweetalert2

import Swal from 'sweetalert2'

方式2.外部引入(不需要引入css文件的)

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

2.使用方法/参数解释

代码如下（示例）：

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

1.图标 icon

提示：测试后发现版本8不支持的，版本11支持。

iconColor:"#000",//设置图标整体颜色
iconHtml:'<span style="font-size:14px;" >哈哈</span>',//设置图标圆框内的内容

1.简单参数介绍

Swal.fire({
  title: "温馨提示", //标题
  text: "上传不能超过9个", //显示内容          
  showCancelButton: false,
  showConfirmButton: false,
  buttons: false,
  timer: 1200,
 })


title:弹出框标题
text:弹出框内容
footer: '<a href="#">Why do I have this issue?</a>'//底部添加内容
timer: 2000,//自动关闭弹出框时间单位ms
showCancelButton:false//是否展示取消按钮

总结

更新进行中