SweetAlert加载完成后自动关闭的弹窗
5星
- 浏览量: 0
- 大小:None
- 文件类型：RAR
简介：
简介：SweetAlert是一款美化版JavaScript弹出警告框插件，这里介绍如何设置其在加载完成后实现自动关闭的效果。
SweetAlert是一款优雅且可自定义的JavaScript警告对话框库，它提供了一种替代浏览器默认警告、确认和输入对话框的方法。本段落将深入探讨如何使用SweetAlert创建一个加载弹窗，并在加载完成后自动关闭。
首先了解一下SweetAlert的基本用法：引入`sweetalert2.min.js`后，你可以通过调用JavaScript来显示一个简单的警告对话框：
```javascript
swal(你好, 这是一个基本的SweetAlert弹窗, info);
```
为了创建一个带有加载指示器的弹窗，可以使用以下代码：
```javascript
swal.fire({
title: 正在加载,
showCancelButton: false,
showLoaderOnConfirm: true,
}).then((result) => {
if (result.isConfirmed) {
// 这里是你的加载逻辑
}
});
```
在这个例子中，`showLoaderOnConfirm`参数设置为`true`会在用户点击确认按钮时显示加载动画。但是我们希望在某个操作完成后自动关闭弹窗而不是等待用户点击确认。
为了实现这一点，在完成加载后调用`sweetalert.close()`即可：
```javascript
swal.fire({
title: 正在加载,
showCancelButton: false,
showLoaderOnConfirm: true,
}).then((result) => {
if (result.isConfirmed) {
// 模拟异步操作（如Ajax请求）
setTimeout(() => {
swal.close(); // 加载完成，关闭弹窗
}, 2000);
}
});
```
这里我们使用`setTimeout()`模拟了两秒的加载时间，在实际应用中应该替换为真正的异步处理逻辑。
此外还可以自定义样式和内容：
```javascript
swal.fire({
title: 正在处理,
text: 请稍候...,
icon: info,
showCancelButton: false,
showLoaderOnConfirm: true,
preConfirm: () => {
// 异步操作
return new Promise((resolve) => {
setTimeout(() => resolve(), 2000); // 模拟异步加载过程，使用setTimeout()函数
});
},
allowOutsideClick: () => !swal.isLoading(),
}).then((result) => {
if (result.value) {
// 加载成功后的操作
}
});
```
`preConfirm`属性允许我们定义一个返回Promise的函数，在用户点击确认后执行。当该Promise解析时，弹窗会自动关闭。
通过以上方法和技巧可以创建出用户体验更佳的加载提示功能。
全部评论 (0)
