本文最后更新于1771天前，其中的信息可能已经有所发展或是发生改变。
前言
近日不经意间看到了一个很新奇的东西——SweetAlert2，这是一个很人性化的用JavaScript写的对话框弹窗，相对于系统自带的来说友好了很多，或许以后能用上。于是折腾了一下。
前排踩坑提醒：GitHub上有两个很类似的项目，地址分别是https://github.com/t4t5/sweetalert和https://github.com/sweetalert2/sweetalert2，貌似是开始是一位dalao独自开发，后来又来一位大仙根据前者的原理又写了一个？（其实我也不是很清楚QAQ，清楚的同志们欢迎在空荡荡的评论区告诉我~）而国内的中文教程数量本来就不多，有的教程你根本不知它在讲哪一个......我花了很长时间才明白这个道理QAQ
下面要讲的是https://github.com/sweetalert2/sweetalert2这个版本的。尽管star数比另一个少，但开发状态更积极一些。
安装或引用
使用npm安装（推荐）
npm install --save sweetalert2然后你就能在\node_modules\sweetalert2\dist\路径下找到对应的CSS和js文件。将他们引入：
<link href="./node_modules/sweetalert2/dist/sweetalert2.min.css" rel="stylesheet">
<script src="./node_modules/sweetalert2/dist/sweetalert2.all.min.js"></script>使用CDN直接引入
国内的bootCDN：https://www.bootcdn.cn/limonte-sweetalert2/
<script src="https://cdn.bootcss.com/limonte-sweetalert2/8.11.8/sweetalert2.all.min.js"></script>
<link href="https://cdn.bootcss.com/limonte-sweetalert2/8.11.8/sweetalert2.min.css" rel="stylesheet">版本比自己npm安装的稍微旧一些，所以推荐npm。
食用方法 举个栗子
引用部分和其他html框架的部分均省略
- 打印出一句话
<script src="./js/jquery-3.4.1.min.js"></script>//jQuery也可以的，效果一样
<body>
<button class="print">显示</button>
<button onclick="sw()">显示</button>
</body>
<script>
$('.print').on('click', function () {
swal.fire('打印出一句话');
})
var sw = function () {
swal.fire('打印出一句话');
}
</script>效果都是一样的：
- 简单的用户交互
<body>
<button onclick="work()">打工</button>
</body>
<script>
var work = function () {
swal.fire({
title: '你要打工嘛？',
text: '你确定要打工？',
type: 'question',
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#3085d6',
confirmButtonText: '我要打工！',
cancelButtonText: '我不要打工！',
confirmButtonClass: 'btn btn-danger',
cancelButtonClass: 'btn btn-success',
buttonsStyling: true,
}).then((result) => {
if (result.value) {
swal.fire(
'你去打工了',
'有精神领袖呢，非打工干啥...',
'info',
)
}
else {
swal.fire(
'打工是不可能的',
'打工是不可能打工的，这辈子都不可能打工的',
'success',
)
}
})
}
</script>效果如图：
关于详细的配置，可以到下方的中文网去查看。
但获取最新的资料最好还是去英文官网https://sweetalert2.github.io
Thanks, it really helps me a lot!!!