使用 Swal.fire 来创建交互式弹窗

Swal.fire 是一个基于 SweetAlert2 的库，它可以让你轻松创建交互式弹窗来提高用户体验。在本文中，我们将介绍如何使用 swal.fire 来创建点击后弹出弹窗的效果。

安装

首先，你需要将 SweetAlert2 和 Swal.fire 库添加到你的项目中。你可以使用 npm 来安装这些库：

npm install sweetalert2
npm install @sweetalert2/ngx-sweetalert2

创建一个基本的弹窗

要创建一个基本的弹窗，在你的 JavaScript 文件中添加以下代码：

Swal.fire({
  title: '标题',
  text: '这里是弹窗内容',
  icon: 'success',
  confirmButtonText: '确认'
})

这会在点击事件触发的时候创建一个带有标题、文本和确认按钮的弹窗。更多参数请参考官方文档：https://sweetalert2.github.io/。

在点击事件中添加弹窗

接下来，我们将在一个按钮的点击事件中添加弹窗。在 HTML 中添加一个 button 元素，并在对应的 JavaScript 文件中添加以下代码：

const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
  Swal.fire({
    title: '欢迎来到 SweetAlert2！',
    text: '这是一个基本的弹窗。',
    icon: 'success',
    confirmButtonText: '确认'
  })
});

现在，每次用户点击按钮时都会触发该弹窗。

自定义按钮

你还可以通过 SweetAlert2 设置弹窗中的按钮，这样用户可以在点击后执行你想要的操作。例如，你可以在弹窗中添加 “取消” 按钮和 “确认” 按钮，以获取用户的确认和反馈。以下示例演示如何设置两个自定义按钮：

Swal.fire({
  title: '确认要删除这个文件吗？',
  text: "这个操作无法恢复。",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: '确认删除！',
  cancelButtonText: '取消'
}).then((result) => {
  if (result.isConfirmed) {
    // 用户点击了 “确认删除” 按钮
    Swal.fire(
      '删除成功！',
      '这个文件已经被删除。',
      'success'
    )
  }
})

结论

在本文中，我们学习了如何使用 Swal.fire 来创建交互式弹窗。你可以将这些弹窗用于需要用户操作或反馈的任何情况下，从而增强用户体验。所以，尝试使用上述代码进行实践，并让你的代码更加精彩和交互!