SweetAlert2 弹窗演示

基础弹窗类型

信息提示

显示基本信息

成功提示

操作成功反馈

警告提示

警告用户注意

错误提示

显示错误信息

确认弹窗

用户确认操作

输入弹窗

获取用户输入

高级功能演示

定时弹窗

自动关闭的弹窗

加载弹窗

显示加载状态

进度弹窗

显示进度条

图片弹窗

显示图片内容

自定义样式

样式特性

自定义CSS类
背景自定义
动画效果
响应式设计

表单集成演示

表单功能

内置表单元素
表单验证
多步骤表单
异步提交

Toast 通知系统

Toast 特性

轻量级通知
位置控制
自动消失
堆叠显示

代码示例

基础用法

Swal.fire({ title: '成功!', text: '操作已完成', icon: 'success', confirmButtonText: '确定' });

确认对话框

Swal.fire({ title: '确定删除?', text: '此操作不可撤销!', icon: 'warning', showCancelButton: true, confirmButtonText: '删除', cancelButtonText: '取消' }).then((result) => { if (result.isConfirmed) { // 执行删除操作 } });

Toast 通知

const Toast = Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000 }); Toast.fire({ icon: 'success', title: '保存成功' });

输入对话框

Swal.fire({ title: '请输入您的姓名', input: 'text', inputPlaceholder: '输入姓名...', showCancelButton: true }).then((result) => { if (result.value) { console.log(result.value); } });

SweetAlert2 主要特性

美观设计

现代化界面
响应式设计
动画效果
自定义主题

功能丰富

多种弹窗类型
表单集成
Toast 通知
进度条支持

易于使用

简单API
Promise支持
无依赖
兼容性好