如何将功能附加到按钮 sweetalert2 - Javascript

SweetAlert2 是一个强大的 JavaScript 对话框库，它具有非常好的用户界面和可以自定义的功能集。本文将介绍如何将功能附加到 SweetAlert2 对话框。

步骤

1. 在 HTML 中添加按钮。

<button id="show-alert">Show Alert</button>

2. 在 JavaScript 中添加按钮点击事件。

document.getElementById("show-alert").addEventListener("click", function() {
  // 添加 SweetAlert2 对话框代码
});

3. 在 SweetAlert2 对话框中添加功能。

Swal.fire({
  title: 'Hello World!',
  text: 'This is a sample SweetAlert2 dialog box.',
  icon: 'success',
  showCancelButton: true,
  confirmButtonText: 'Confirm',
  cancelButtonText: 'Cancel'
}).then((result) => {
  if (result.isConfirmed) {
    // 添加“确认”按钮点击后的功能
  } else {
    // 添加“取消”按钮点击后的功能
  }
});

SweetAlert2 对话框选项

SweetAlert2 对话框提供了许多选项，以便自定义其外观和功能。以下是最常用的选项：

|选项|描述| |---|---| | title | 对话框标题 | | text | 对话框正文 | | icon | 对话框图标 | | showCancelButton | 是否显示取消按钮 | | confirmButtonText | 确认按钮的文本 | | cancelButtonText | 取消按钮的文本 |

完整的选项列表可以在 SweetAlert2 文档中找到。

示例

以下代码演示了如何使用 SweetAlert2 的某些选项。

document.getElementById("show-alert").addEventListener("click", function() {
  Swal.fire({
    title: 'Are you sure?',
    text: 'You are about to delete this item.',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Delete',
    cancelButtonText: 'Cancel',
    confirmButtonColor: '#DC3545'
  }).then((result) => {
    if (result.isConfirmed) {
      // 添加“确认”按钮点击后的功能
      console.log('Item deleted!');
    } else {
      // 添加“取消”按钮点击后的功能
      console.log('Deletion cancelled!');
    }
  });
});

结论

通过使用 SweetAlert2，我们可以轻松地创建具有自定义功能的漂亮对话框，并将这些功能附加到按钮等元素上。她为我们的用户提供了更好的交互体验。