SweetAlert 弹窗库完全使用指南

什么是 SweetAlert

SweetAlert 是一个功能强大、高度可定制的 JavaScript 弹窗库，它可以替代浏览器原生的 alert() 和 confirm() 方法，提供更美观、更灵活的交互体验。相比原生弹窗，SweetAlert 具有以下优势：

• 现代化的 UI 设计
• 支持自定义图标和按钮
• 支持 Promise 异步处理
• 高度可定制化的内容区域
• 丰富的交互选项

安装方法

通过包管理器安装

推荐使用 npm 或 yarn 等包管理器安装 SweetAlert，配合 Webpack 等构建工具使用：

npm install sweetalert --save

安装后，在项目中引入：

import swal from 'sweetalert';

通过 CDN 引入

如果不使用构建工具，也可以通过 CDN 直接引入：

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

引入后，全局会注册 swal 函数。

基础使用

简单弹窗

最基本的弹窗只需要传入一个字符串参数：

swal("Hello world!");

这会显示一个包含"Hello world!"文本的弹窗。

带标题的弹窗

传入两个参数时，第一个是标题，第二个是内容：

swal("这是标题", "这是内容文本");

带图标的弹窗

第三个参数可以指定图标类型，支持四种预设图标：

swal("操作成功", "数据已保存", "success");

可用的图标类型有：

• "success" - 成功图标
• "error" - 错误图标
• "warning" - 警告图标
• "info" - 信息图标

使用配置对象

更推荐的方式是使用配置对象，这样可以设置更多选项：

swal({
  title: "操作成功",
  text: "数据已保存",
  icon: "success",
  button: "确定"
});

进阶功能

Promise 支持

SweetAlert 返回 Promise 对象，可以方便地处理用户交互：

swal("点击确定或取消")
.then((value) => {
  if (value) {
    console.log("用户点击了确定");
  } else {
    console.log("用户取消了操作");
  }
});

危险操作确认

对于危险操作，可以设置 dangerMode 来强调：

swal({
  title: "确认删除?",
  text: "删除后无法恢复!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    // 执行删除操作
  }
});

自定义按钮

可以完全自定义按钮的文本和行为：

swal({
  title: "选择操作",
  buttons: {
    cancel: "取消",
    confirm: {
      text: "确认",
      value: "confirm"
    }
  }
})
.then((value) => {
  console.log(value); // 输出 "confirm" 或 null
});

AJAX 集成

结合 Promise 可以方便地与 AJAX 操作集成：

swal({
  text: '输入电影名称',
  content: "input",
  button: {
    text: "搜索",
    closeModal: false,
  },
})
.then(name => {
  if (!name) return;
  return fetch(`/api/search?q=${name}`);
})
.then(/* 处理结果 */);

高级定制

自定义内容

可以使用 DOM 节点作为弹窗内容：

const input = document.createElement('input');
swal({
  text: "请输入内容",
  content: input
});

与 React 集成

SweetAlert 提供了专门的 React 版本，可以直接使用 JSX：

import swal from '@sweetalert/with-react';

swal(
  <div>
    <h1>React 内容</h1>
    <p>直接在 SweetAlert 中使用 JSX</p>
  </div>
);

升级指南

从 1.x 升级到 2.x 需要注意以下变化：

1. 回调函数改为 Promise 形式
2. 不再需要单独引入 CSS 文件
3. 参数命名更加规范，如：
   • type 改为 icon
   • customClass 改为 className
   • showCancelButton 改为 buttons: true
4. 输入框功能整合到 content 选项中

最佳实践

1. 对于重要操作，始终提供取消选项
2. 危险操作使用 dangerMode 强调
3. 长时间操作时保持弹窗打开，直到操作完成
4. 合理使用图标增强视觉反馈
5. 保持弹窗内容简洁明了

SweetAlert 提供了丰富的配置选项和灵活的扩展方式，可以满足各种复杂的交互需求。通过合理使用，可以显著提升 Web 应用的用户体验。