SweetAlert2：一款美观且强大的提示框库

SweetAlert2 是一款基于原始 SweetAlert 代码库的 JavaScript 提示框库。它的设计简洁，美观，而且非常方便使用。

功能和特点：

• 可以自定义图标、标题、消息，以及确定和取消按钮的文本。

• 提供多种预定义的图标和主题样式。

• 可以自定义提示框的外观、动画效果等。

• 可以用来代替 JavaScript 原生的 alert、confirm 和 prompt 对话框。

• 支持 Promise API，方便异步编程。

• 支持可定制的 HTML 内容和自定义表单控件。

• 支持配置回调函数，以及 show/hide 事件。

安装和使用：

首先，你需要使用 npm 安装 SweetAlert2：

npm i sweetalert2

安装完成后，你可以在你的项目中引入 SweetAlert2：

import Swal from 'sweetalert2'
// 或者使用旧的 CommonJS 语法：
// const Swal = require('sweetalert2')

引入后，你就可以像下面这样使用它：

Swal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})

上述代码会显示一个带有标题、文本和确认和取消按钮的提示框。当用户点击确认按钮时，会弹出另一个提示框显示“Deleted! Your file has been deleted.”。

自定义图标和主题

SweetAlert2 自带了多种预定义的图标和主题样式。你也可以自定义图标和主题。

下面是一些示例代码：

// 使用 Info 图标和绿色主题
Swal.fire({
  icon: 'info',
  title: 'Info alert',
  text: 'This is an info alert with a green theme',
  confirmButtonColor: '#6ac259'
});

// 使用 Warning 图标和橙色主题
Swal.fire({
  icon: 'warning',
  title: 'Warning alert',
  text: 'This is a warning alert with a orange theme',
  confirmButtonColor: '#ffaa2c'
});

// 自定义图标和主题
Swal.fire({
  title: 'Custom alert',
  text: 'You can customize your alerts with your own icons and themes',
  imageUrl: '/path/to/custom-image.jpg',
  imageWidth: 200,
  imageHeight: 200,
  imageAlt: 'Custom image',
  confirmButtonColor: '#1a1a1a',
  background: '#fff'
});

更多信息

SweetAlert2 是一款功能强大的提示框库。在其官网上，你可以找到更多示例代码和文档。

• SweetAlert2 官网：https://sweetalert2.github.io/

• SweetAlert2 GitHub 仓库：https://github.com/sweetalert2/sweetalert2

• SweetAlert2 文档：https://sweetalert2.github.io/#documentation