Swal.getCancelButton()

Метод Swal.getCancelButton() является частью библиотеки SweetAlert2 и используется для получения ссылки на кнопку “Отмена” в окне предупреждения. Этот метод полезен для тех случаев, когда требуется взаимодействовать с кнопкой отмены после того, как окно с уведомлением было отображено. Возможности использования этого метода вносят дополнительные удобства в работу с модальными окнами, позволяя изменять стили кнопки, реагировать на её состояние или программно управлять ею.

Принцип работы

После того как окно SweetAlert с кнопками отображается, можно использовать метод Swal.getCancelButton() для получения элемента кнопки “Отмена”. Этот метод возвращает объект DOM, что позволяет манипулировать его свойствами через стандартные средства JavaScript, такие как изменение стилей, добавление обработчиков событий или получение состояния кнопки.

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

Метод может быть использован в связке с методами Swal.fire() для создания модального окна с кнопкой “Отмена”, а затем можно выполнить действия с этой кнопкой:

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

// Получение кнопки "Отмена" после её рендеринга
const cancelButton = Swal.getCancelButton();
cancelButton.style.backgroundColor = 'red';  // Изменение фона кнопки

Возвращаемое значение

Метод Swal.getCancelButton() возвращает объект DOM, который представляет собой кнопку “Отмена” в модальном окне. Этот объект предоставляет доступ к всем стандартным свойствам и методам DOM, таким как:

  • style — для изменения стилей кнопки;
  • disabled — для проверки или изменения состояния активности кнопки;
  • addEventListener() — для добавления кастомных обработчиков событий.

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

  1. Изменение стилей кнопки

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

Swal.fire({
  title: 'Вы уверены?',
  showCancelButton: true,
  confirmButtonText: 'Подтвердить',
  cancelButtonText: 'Отмена'
}).then(() => {
  const cancelButton = Swal.getCancelButton();
  cancelButton.style.backgroundColor = 'red';  // Изменение фона кнопки
  cancelButton.style.color = 'white';         // Изменение цвета текста
});
  1. Управление состоянием кнопки

Метод getCancelButton() можно использовать для управления состоянием кнопки. Например, можно сделать кнопку “Отмена” неактивной в зависимости от определённых условий.

Swal.fire({
  title: 'Подтвердите действие',
  text: 'Вы уверены, что хотите отменить?',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да',
  cancelButtonText: 'Отмена'
}).then(() => {
  const cancelButton = Swal.getCancelButton();
  cancelButton.disabled = true;  // Отключение кнопки
});
  1. Добавление обработчиков событий

Иногда возникает необходимость добавить события, например, для обработки нажатия на кнопку “Отмена”. В этом случае можно воспользоваться стандартными средствами JavaScript для навешивания событий на кнопку, возвращённую методом Swal.getCancelButton().

Swal.fire({
  title: 'Вы уверены?',
  showCancelButton: true,
  confirmButtonText: 'Да',
  cancelButtonText: 'Отмена'
}).then(() => {
  const cancelButton = Swal.getCancelButton();
  cancelButton.addEventListener('click', () => {
    console.log('Кнопка отмены была нажата');
  });
});

Важные замечания

  • Метод Swal.getCancelButton() доступен только после того, как окно SweetAlert было отображено. Если попытаться вызвать его до того, как модальное окно появилось, метод не сможет вернуть элемент.
  • Взаимодействие с кнопкой через этот метод не ограничивается только стилями и событиями. Можно использовать любые манипуляции с элементами DOM, такие как добавление классов, скрытие кнопки и другие операции.
  • Использование этого метода особенно полезно в динамических интерфейсах, где требуется персонализировать внешний вид кнопки или изменить её поведение в зависимости от состояния приложения.

Применение в реальных проектах

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

Пример использования в проекте с многоступенчатым подтверждением:

function confirmDelete() {
  Swal.fire({
    title: 'Вы уверены, что хотите удалить этот элемент?',
    text: 'Это действие необратимо!',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Удалить',
    cancelButtonText: 'Отмена'
  }).then((result) => {
    if (result.isConfirmed) {
      console.log('Элемент удалён');
    } else if (result.dismiss === Swal.DismissReason.cancel) {
      const cancelButton = Swal.getCancelButton();
      cancelButton.style.backgroundColor = 'grey';  // Смена цвета кнопки при отмене
    }
  });
}

Метод Swal.getCancelButton() предоставляет гибкость в настройке и контроле над кнопкой “Отмена” в окне SweetAlert, что делает его мощным инструментом для более глубокого взаимодействия с модальными окнами в приложениях.

Оглавление