Использование в Vue

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

Для начала необходимо установить библиотеку SweetAlert в проект. В проектах, использующих Vue, рекомендуется устанавливать библиотеку через npm или yarn.

npm install sweetalert2

Или если используется yarn:

yarn add sweetalert2

После установки библиотеки можно приступить к её интеграции в Vue.

Импорт SweetAlert в компонент Vue

Для того чтобы использовать SweetAlert в компоненте Vue, его необходимо импортировать. Обычно это делается в начале компонента.

import Swal from 'sweetalert2';

Теперь можно использовать функции SweetAlert в любом месте компонента.

Основные возможности SweetAlert

Простое уведомление

Для отображения простого уведомления с сообщением можно использовать метод Swal.fire(). Он позволяет настроить текст уведомления и тип сообщения.

Swal.fire('Привет мир!');

Этот код отобразит модальное окно с текстом «Привет мир!» и стандартным стилем.

Уведомление с кнопками

SweetAlert позволяет добавлять кастомные кнопки в модальные окна. Это достигается через параметры confirmButtonText и cancelButtonText.

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

После того как пользователь нажмет на одну из кнопок, можно обработать результат через промис, который возвращает метод then().

Использование кастомных иконок

SweetAlert позволяет использовать различные иконки, такие как success, error, warning, info и question. Иконки можно комбинировать с текстом и кнопками.

Swal.fire({
  icon: 'success',
  title: 'Операция завершена!',
  text: 'Данные успешно сохранены.',
});

Ввод текста пользователем

Для создания формы с полем ввода текста в модальном окне используется параметр input. В результате пользователь может ввести текст, который будет доступен после закрытия модального окна.

Swal.fire({
  title: 'Введите ваше имя',
  input: 'text',
  inputPlaceholder: 'Имя пользователя'
}).then((result) => {
  if (result.value) {
    console.log('Введено имя: ', result.value);
  }
});

Выбор из списка

Для создания выпадающего списка используется параметр input с типом select.

Swal.fire({
  title: 'Выберите язык',
  input: 'SELECT',
  inputOptions: {
    en: 'English',
    ru: 'Русский',
    fr: 'Français'
  },
  inputPlaceholder: 'Выберите язык'
}).then((result) => {
  if (result.value) {
    console.log('Выбран язык: ', result.value);
  }
});

Использование прогресс-бара

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

Swal.fire({
  title: 'Загрузка',
  html: 'Пожалуйста, подождите...',
  timer: 5000,
  timerProgressBar: true,
  didOpen: () => {
    Swal.showLoading();
  }
});

Интеграция с Vue

В Vue компонентах можно удобно использовать SweetAlert в обработчиках событий. Например, при нажатии на кнопку можно отобразить модальное окно с подтверждением или уведомлением.

<template>
  <div>
    <button @click="showAlert">Показать уведомление</button>
  </div>
</template>

<script>
import Swal FROM 'sweetalert2';

export default {
  methods: {
    showAlert() {
      Swal.fire('Hello from Vue!');
    }
  }
}
</script>

При нажатии на кнопку вызовется метод showAlert, который отобразит уведомление.

Использование SweetAlert в асинхронных операциях

Если в проекте используется асинхронный код (например, работа с API), можно использовать SweetAlert для отображения уведомлений о ходе выполнения или результатах. Например, можно использовать модальные окна с прогрессом или сообщениями об ошибках.

async fetchData() {
  Swal.fire({
    title: 'Загрузка данных...',
    timerProgressBar: true,
    didOpen: () => {
      Swal.showLoading();
    }
  });

  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    Swal.fire({
      title: 'Успешно!',
      text: 'Данные были загружены.',
      icon: 'success'
    });
  } catch (error) {
    Swal.fire({
      title: 'Ошибка',
      text: 'Не удалось загрузить данные.',
      icon: 'error'
    });
  }
}

В этом примере перед выполнением запроса отображается окно с индикатором загрузки. Если запрос успешен, выводится уведомление с сообщением о результате.

Кастомизация SweetAlert

SweetAlert позволяет тонко настраивать внешний вид модальных окон. Это можно сделать через стилизацию с помощью параметра customClass, который позволяет добавить свои классы для заголовка, текста, кнопок и фона.

Swal.fire({
  title: 'Внимание!',
  text: 'Это важно.',
  icon: 'warning',
  customClass: {
    title: 'my-title-class',
    text: 'my-text-class',
    confirmButton: 'my-button-class'
  }
});

Затем можно определить стили для этих классов в файле CSS:

.my-title-class {
  color: red;
  font-weight: bold;
}

.my-text-class {
  font-style: italic;
}

.my-button-class {
  background-color: blue;
}

Модальные окна с динамическим содержанием

Можно динамически изменять содержимое модального окна в зависимости от условий. Например, при условии успешного выполнения операции можно изменить текст или тип иконки.

Swal.fire({
  title: 'Ожидание...',
  text: 'Данные загружаются...',
  icon: 'info',
  showConfirmButton: false,
  timer: 3000
}).then(() => {
  Swal.fire({
    title: 'Успех!',
    text: 'Операция завершена.',
    icon: 'success'
  });
});

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

Заключение

Интеграция SweetAlert в Vue.js позволяет улучшить пользовательский опыт и добавить визуальные компоненты, такие как модальные окна, уведомления и диалоговые окна. Библиотека предоставляет гибкие настройки и возможности для работы с динамическим контентом и асинхронными операциями.