Обработка нажатий

SweetAlert — это библиотека для отображения красивых и настраиваемых всплывающих окон. Одной из ключевых особенностей является возможность обработки нажатий на кнопки внутри этих окон. Понимание механизма работы с событиями нажатий позволяет гибко настроить взаимодействие с пользователем, обеспечивая более плавный и динамичный интерфейс.

1. Базовая обработка нажатий

Каждое всплывающее окно в SweetAlert может содержать несколько кнопок, и на каждую кнопку можно назначить собственную функцию для обработки её нажатия. В SweetAlert2 это реализуется через параметры preConfirm и confirmButtonText, а также с помощью события then, которое предоставляет Promise.

Пример простого использования:

Swal.fire({
  title: 'Вы уверены?',
  text: 'Эта операция необратима.',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да, удаляю!',
  cancelButtonText: 'Отмена'
}).then((result) => {
  if (result.isConfirmed) {
    // Действие при нажатии "Да"
    console.log('Удаление выполнено!');
  } else if (result.isDismissed) {
    // Действие при нажатии "Отмена"
    console.log('Удаление отменено!');
  }
});

Здесь result.isConfirmed проверяет, был ли нажата кнопка “Да”, а result.isDismissed срабатывает, если нажата кнопка “Отмена” или было закрыто окно.

2. Обработчик кнопки через preConfirm

Параметр preConfirm позволяет выполнить проверку или обработку данных до того, как окно будет закрыто. Это полезно для асинхронных операций, таких как валидация ввода или отправка данных на сервер.

Пример с использованием preConfirm:

Swal.fire({
  title: 'Введите свой email',
  input: 'email',
  inputPlaceholder: 'email@example.com',
  showCancelButton: true,
  confirmButtonText: 'Отправить',
  preConfirm: (email) => {
    return new Promise((resolve, reject) => {
      if (email === '') {
        reject('Поле не может быть пустым');
      } else {
        resolve();
      }
    });
  }
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Email отправлен');
  }
}).catch((error) => {
  console.error(error);
});

Здесь, если введенный email пустой, будет выведена ошибка, и окно не закроется, пока пользователь не введет корректные данные.

3. Работа с несколькими кнопками

В SweetAlert2 можно определить несколько кнопок для взаимодействия с пользователем. Обработка нажатий на разные кнопки реализуется через параметры showCancelButton, cancelButtonText, и обработчик then.

Пример с двумя кнопками:

Swal.fire({
  title: 'Вы хотите сохранить изменения?',
  icon: 'question',
  showCancelButton: true,
  confirmButtonText: 'Сохранить',
  cancelButtonText: 'Отменить'
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Изменения сохранены');
  } else if (result.isDismissed) {
    console.log('Изменения отменены');
  }
});

Кроме того, в случае с несколькими кнопками, можно использовать параметры cancelButtonText и confirmButtonText для изменения текста кнопок и их функциональности.

4. Применение асинхронных обработчиков

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

Пример с асинхронным запросом:

async function saveData() {
  const result = await Swal.fire({
    title: 'Сохранить данные?',
    text: 'Изменения будут сохранены.',
    icon: 'info',
    showCancelButton: true,
    confirmButtonText: 'Сохранить',
    cancelButtonText: 'Отменить'
  });

  if (result.isConfirmed) {
    // Выполнение асинхронной операции при нажатии "Сохранить"
    await sendDataToServer();
    Swal.fire('Данные сохранены', '', 'success');
  } else if (result.isDismissed) {
    Swal.fire('Действие отменено', '', 'error');
  }
}

async function sendDataToServer() {
  // Здесь может быть код для отправки данных на сервер
  return new Promise((resolve) => setTimeout(resolve, 2000)); // Имитация задержки
}

saveData();

5. Прерывание работы с кнопками

В некоторых случаях требуется отменить или изменить поведение кнопок после их нажатия. Это можно сделать через доступ к результату обработки в then, а также с помощью методов close() или dismiss().

Пример изменения поведения кнопок динамически:

Swal.fire({
  title: 'Вы хотите продолжить?',
  showCancelButton: true,
  confirmButtonText: 'Да, продолжить',
  cancelButtonText: 'Нет, отменить'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire({
      title: 'Действие продолжается...',
      text: 'Нажмите на кнопку для завершения.',
      confirmButtonText: 'Завершить'
    });
  } else {
    Swal.close();
  }
});

6. Настройка событий на кнопках через Swal.clickConfirm()

В случае, когда необходимо программно вызвать нажатие на кнопку (например, при успешном выполнении какой-то операции), можно использовать метод Swal.clickConfirm(). Этот метод симулирует нажатие на кнопку подтверждения.

Пример:

Swal.fire({
  title: 'Подтвердите действие',
  text: 'Выполнение действия через 3 секунды...',
  confirmButtonText: 'Продолжить'
});

// Программный клик на кнопку подтверждения через 3 секунды
setTimeout(() => {
  Swal.clickConfirm();
}, 3000);

Такое поведение полезно для автоматических действий, не требующих вмешательства пользователя, при этом сохраняя интерфейс интерактивным и понятным.

7. Программное закрытие окна с помощью кнопки

При необходимости можно закрыть окно SweetAlert программно, что удобно для создания сценариев, где окно нужно закрыть в ответ на определённое событие или выполнение задачи.

Пример с программным закрытием окна:

Swal.fire({
  title: 'Задача выполнена',
  text: 'Задача была успешно завершена.',
  icon: 'success',
  confirmButtonText: 'Ок'
}).then(() => {
  // Закрытие окна после 2 секунд
  setTimeout(() => {
    Swal.close();
  }, 2000);
});

Заключение

Обработка нажатий в SweetAlert2 является важным инструментом для создания интерактивных и отзывчивых интерфейсов. Использование различных вариантов событий, таких как обработчики кнопок через then, асинхронные функции с preConfirm, а также возможность программного взаимодействия, даёт широкие возможности для настройки поведения всплывающих окон.

Оглавление