前言
近日不经意间看到了一个很新奇的东西——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!!!