【亲测免费】 SweetAlert2 教程与指南

2026-01-17 08:33:05作者：盛欣凯Ernestine

1. 项目介绍

SweetAlert2 是一个高度可定制且符合 Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) 标准的JavaScript弹出框库，它是原生JavaScript弹出框的优雅替代方案。这个库没有任何外部依赖，旨在提供响应式、自适应的设计以及丰富的交互体验。通过其简洁的API，开发者可以轻松地创建提示、警告、确认和模态对话框。

2. 项目快速启动

安装

首先，确保你的项目已经安装了 npm 或 yarn。接下来，你可以通过以下命令将 sweetalert2 添加到你的项目中：

使用 npm:

npm install sweetalert2

或者，如果你是 yarn 用户：

yarn add sweetalert2

使用示例

在你的JavaScript文件中引入 sweetalert2 并调用一个简单的警告对话框：

import Swal from 'sweetalert2';

Swal.fire({
  title: 'Hello World!',
  text: 'This is an example alert',
  icon: 'info'
});

这段代码会在页面上显示一个带有"Hello World!"标题和描述文本"Thiis is an example alert"的信息提示框。

3. 应用案例和最佳实践

错误处理：

try {
  // Some potentially error-prone operation
} catch (error) {
  Swal.fire({
    title: 'An error occurred!',
    text: error.message,
    icon: 'error',
    confirmButtonText: 'Try again'
  });
}

异步操作：

Swal.fire({
  title: 'Please wait...',
  allowOutsideClick: false,
  timerProgressBar: true
}).then((result) => {
  if (result.isConfirmed) {
    // Perform some asynchronous task
    fetch('your/api')
      .then(response => response.json())
      .then(data => Swal.fire({ /* Display success message */ }))
      .catch(error => Swal.showValidationMessage(`Request failed: ${error}`));
  }
});

自定义按钮和回调：

Swal.fire({
  title: 'Customize your dialog',
  html: '<input id="swal-input">',
  showCancelButton: true,
  confirmButtonText: 'Update',
  focusConfirm: false,
  preConfirm: () => document.getElementById('swal-input').value
}).then((result) => {
  if (result.value) {
    console.log(result.value);
  }
});