Одним из распространенных сценариев в веб-разработке является необходимость подтверждения пользователя перед удалением важных данных. Диалоговое окно подтверждения браузера по умолчанию может быть визуально непривлекательным и не иметь возможностей настройки. SweetAlert2 — популярная библиотека JavaScript, которая предоставляет красиво оформленное и настраиваемое модальное диалоговое окно для различных целей, включая подтверждение удаления. В этой статье мы рассмотрим несколько методов реализации подтверждения удаления SweetAlert2 в вашем веб-приложении, а также приведем примеры кода.

Метод 1: использование базового синтаксиса 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) {
    // Handle delete operation
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})

Метод 2. Настройка содержимого диалогового окна

Swal.fire({
  title: 'Are you sure?',
  html: 'This action will permanently delete the selected item. <br> <strong>This action cannot be undone!</strong>',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Delete',
}).then((result) => {
  if (result.isConfirmed) {
    // Handle delete operation
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})

Метод 3. Настройка стилей диалога

Swal.fire({
  title: 'Are you sure?',
  text: 'This action cannot be undone!',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!',
  customClass: {
    title: 'my-title-class',
    text: 'my-text-class',
    confirmButton: 'my-confirm-button-class',
    cancelButton: 'my-cancel-button-class'
  }
}).then((result) => {
  if (result.isConfirmed) {
    // Handle delete operation
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})

Метод 4. Использование Async/Await с SweetAlert2

async function confirmDelete() {
  const result = await Swal.fire({
    title: 'Are you sure?',
    text: 'This action cannot be undone!',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Yes, delete it!'
  });
  if (result.isConfirmed) {
    // Handle delete operation
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
}
confirmDelete();

Используя SweetAlert2, вы можете улучшить взаимодействие с пользователем, предоставив визуально привлекательный и настраиваемый диалог подтверждения удаления. В этой статье мы рассмотрели различные методы реализации подтверждения удаления SweetAlert2 в вашем веб-приложении. Независимо от того, предпочитаете ли вы базовый синтаксис, настраиваете содержимое или стили диалога или используете async/await, SweetAlert2 предлагает гибкость для удовлетворения ваших конкретных требований. Так что смело интегрируйте SweetAlert2 в свой проект, чтобы упростить взаимодействие с пользователем и улучшить общий пользовательский опыт.