Swal 报错，你遇到了哪些常见问题，如何快速解决它们？-HCRM博客

Swal（即 SweetAlert2）是一个流行的 JavaScript 库，用于在网页上显示漂亮的警告框、弹出框和对话框，如果在使用 Swal 时遇到报错，可能是由于多种原因引起的，以下是一些常见的错误及其解决方法：

常见错误及解决方法

（图片来源网络，侵权删除）

错误类型	描述	解决方法
未定义的变量	`Swal` 或`swal` 未定义	确保已经正确引入 SweetAlert2 脚本和样式文件，可以通过以下方式之一引入： 1. 使用 CDN: ```html```2. 通过 NPM 安装并引入：```bash npm install sweetalert2`` `然后在 JavaScript 文件中引入：```javascript import Swal from 'sweetalert2';```
版本兼容性问题	SweetAlert2 的某些功能在特定版本中可能不可用	检查文档以确认所使用的版本是否支持所需的功能，某些新功能可能在旧版本中不可用，确保使用的是最新的稳定版本。
依赖项缺失	SweetAlert2 依赖于 jQuery 或其他库	如果使用的是需要 jQuery 的 SweetAlert2 版本，请确保已正确引入 jQuery，可以通过以下方式引入：```html```
语法错误	JavaScript 代码中存在语法错误	使用代码编辑器或 IDE 进行语法检查，确保没有拼写错误、缺少括号等常见问题。
配置错误	Swal 的配置选项不正确	检查传递给 Swal 的参数是否正确，确保传递了正确的标题、文本和按钮配置，示例：```javascript Swal.fire({ title: 'Hello', text: 'This is a message', icon: 'info', confirmButtonText: 'OK' });```
样式冲突	页面上的其他 CSS 样式与 SweetAlert2 冲突	检查页面上的其他样式表，确保没有覆盖 SweetAlert2 的关键样式，可以通过浏览器开发者工具查看元素样式，找出冲突的地方。
异步操作错误	在 Swal 回调函数中的异步操作未正确处理	确保在 Swal 的回调函数中正确处理异步操作，使用`async/await` 或`Promise`，示例：```javascript Swal.fire({ title: 'Loading', onBeforeOpen: async () => { await someAsyncFunction(); } });```

示例代码

下面是一个简单的示例，展示了如何使用 SweetAlert2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>SweetAlert2 Example</title>
    <!引入 SweetAlert2 样式 >
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesomefree/css/all.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10/dist/sweetalert2.min.css" />
</head>
<body>
    <button id="showAlert">Show Alert</button>
    <!引入 SweetAlert2 脚本 >
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10/dist/sweetalert2.min.js"></script>
    <script>
        document.getElementById('showAlert').addEventListener('click', () => {
            Swal.fire({
                title: 'Hello World!',
                text: 'This is a simple alert',
                icon: 'success',
                confirmButtonText: 'OK'
            });
        });
    </script>
</body>
</html>

FAQs

Q1: SweetAlert2 如何自定义图标？

A1: SweetAlert2 提供了多种内置图标，可以通过icon 参数来设置。

Swal.fire({
    title: 'Custom Icon',
    text: 'This is an alert with a custom icon',
    icon: 'warning', // 可以是 success, error, warning, info, question
    confirmButtonText: 'OK'
});

要使用自定义图标，可以使用 Font Awesome 图标库：

（图片来源网络，侵权删除）

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesomefree/css/all.min.css" />

并在 Swal 配置中使用html 属性：

Swal.fire({
    title: '<i class="fas facheck"></i> Custom Icon',
    html: 'This is an alert with a custom icon',
    confirmButtonText: 'OK'
});

Q2: SweetAlert2 如何显示模态框？

A2: SweetAlert2 可以显示模态框，只需将allowOutsideClick 设置为false，并将showConfirmButton 和showCancelButton 设置为true：

Swal.fire({
    title: 'Modal Title',
    text: 'This is a modal',
    icon: 'info',
    showConfirmButton: true,
    showCancelButton: true,
    allowOutsideClick: false
});