sweetalert2全网最详细的使用方法

简介

sweetalert2是一个弹出框插件，它具有更多的自定义选项和更好的用户体验。它基于SweetAlert，是它的改进版，提供了一些额外的功能。这篇文章将会详细介绍sweetalert2的使用方法和一些常用的选项和回调函数。

安装

要使用sweetalert2，我们需要引入它的js和css文件。推荐使用npm安装，执行以下命令：

npm install sweetalert2

如果你使用的是CDN，也可以通过以下链接引入：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>

基础用法

sweetalert2的基本调用方式如下所示：

Swal.fire('Hello world!');

这将显示一个带有"Hello world!"消息和确认按钮的弹出框。可以通过以下语法增加更多的选项和按钮：

Swal.fire({
  title: 'Error!',
  text: 'Do you want to continue',
  icon: 'error',
  confirmButtonText: 'Cool',
  cancelButtonText: 'Nope'
})

快速创建一个简单的弹出框的语法：

Swal.fire('任意文本')

这将会显示一个带有任意文本和确认按钮的弹出框。

可定制的选项

上面的例子提供了几个选项我们可以使用，下面列出一些常见的选项：

• title：弹出框的标题。
• text：弹出框的文本内容。
• icon：弹出框的图标类型。可以设置为"warning","error","success","info","question"。
• confirmButtonText：确认按钮的文本。
• cancelButtonText：取消按钮的文本。
• showCancelButton：是否显示取消按钮等等。

这里是一个例子，它包含了所有的这些选项：

Swal.fire({
  title: 'Custom animation with Animate.css',
  text: 'Creating custom animation using Animate.css library is easy',
  icon: 'info',
  showCancelButton: true,
  confirmButtonText: 'Yes, do it!',
  cancelButtonText: 'No, cancel it',
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  reverseButtons: true,
})

我们还可以使用更进一步的选项，例如可以使用多个以及自定义按钮等，更详细的文档请访问sweetalert2的官网。

回调函数

sweetalert2也提供了一些回调函数，以便我们在用户做出决定之后可以执行不同的任务。

Swal.fire({
  title: 'Custom animation with Animate.css',
  text: 'Creating custom animation using Animate.css library is easy',
  icon: 'info',
  showCancelButton: true,
  confirmButtonText: 'Yes, do it!',
  cancelButtonText: 'No, cancel it',
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  reverseButtons: true,
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  } else if (result.isDenied) {
    Swal.fire(
      'Cancelled',
      'Your imaginary file is safe :)',
      'error'
    )
  }
})

在这个例子中，我们使用了.then()方法，当用户点击"确认"或"取消"按钮之一时就调用它。如果用户点击确认按钮，将弹出另一个弹出框显示一个成功的消息，否则将弹出一个错误弹出框。

总结

sweetalert2是一个功能非常强大的弹出框插件，包含了大量的选项和回调函数，可以让我们定制弹出框以适应我们的需求。在本文中，我们介绍了基本用法、可定制选项和回调函数等，仅是sweetalert2使用的基础，如果你想了解更多信息，请查阅sweetalert2的官方文档。