Снекбары v-snackbar

Компонент v-snackbar в Vuetify предназначен для отображения кратких уведомлений или сообщений пользователю. Он обычно используется для подтверждения действий, показа ошибок или информационных сообщений. v-snackbar появляется поверх интерфейса и может автоматически исчезать через заданный интервал времени или закрываться вручную.

Базовая структура компонента выглядит следующим образом:

<template>
  <v-snackbar v-model="snackbar" timeout="3000">
    Сообщение успешно отправлено!
    <template v-slot:action>
      <v-btn color="pink" text @click="snackbar = false">Закрыть</v-btn>
    </template>
  </v-snackbar>
</template>

<script>
export default {
  data() {
    return {
      snackbar: false
    };
  }
};
</script>

Ключевые моменты:

  • v-model — управление видимостью снекбара.
  • timeout — время в миллисекундах, через которое компонент автоматически скрывается.
  • v-slot:action — слот для добавления кнопки действия, например, закрытия уведомления.

Позиционирование и цвета

v-snackbar поддерживает различные позиции на экране: bottom, top, left, right и их комбинации. По умолчанию уведомления появляются в нижней части экрана, выравниваясь по центру.

<v-snackbar v-model="snackbar" top right>
  Сообщение в верхнем правом углу
</v-snackbar>

Для изменения внешнего вида используются стандартные классы Vuetify для цвета:

<v-snackbar v-model="snackbar" color="green darken-1" text-color="white">
  Операция выполнена успешно
</v-snackbar>

Важно: color задаёт фон, а text-color — цвет текста.

Автоматическое скрытие и управление временем

Снекбары могут автоматически исчезать через указанный timeout:

<v-snackbar v-model="snackbar" timeout="5000">
  Это сообщение исчезнет через 5 секунд
</v-snackbar>
  • Если timeout=“0”, уведомление останется на экране до явного закрытия пользователем.
  • Можно использовать динамическое управление таймаутом, изменяя значение timeout в зависимости от типа сообщения.

Добавление кнопок действий

Через слот action можно добавлять интерактивные элементы:

<v-snackbar v-model="snackbar" timeout="6000">
  Сообщение об ошибке
  <template v-slot:action="{ attrs }">
    <v-btn color="red" text v-bind="attrs" @click="snackbar = false">
      Повторить
    </v-btn>
  </template>
</v-snackbar>

Слот автоматически наследует необходимые атрибуты для корректного отображения кнопки и доступности.

Множественные уведомления

Vuetify не ограничивает количество снекбаров. Для управления несколькими уведомлениями можно использовать массив объектов и динамически рендерить их через v-for:

<template>
  <div>
    <v-snackbar
      v-for="(snack, index) in snacks"
      :key="index"
      v-model="snack.show"
      :timeout="snack.timeout"
      :color="snack.color"
    >
      {{ snack.message }}
      <template v-slot:action>
        <v-btn text @click="snack.show = false">Закрыть</v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      snacks: [
        { message: 'Ошибка загрузки', color: 'red', show: false, timeout: 4000 },
        { message: 'Данные сохранены', color: 'green', show: false, timeout: 3000 }
      ]
    };
  }
};
</script>

Использование с Vuex или глобальным менеджером уведомлений

Для крупных приложений удобно управлять снекбарами через глобальное состояние. Например, с Vuex можно хранить массив сообщений, а компонент снекбаров будет подписан на изменения:

computed: {
  snacks() {
    return this.$store.state.snacks;
  }
}

Каждое уведомление автоматически рендерится и исчезает после timeout, обеспечивая единый стиль и поведение для всех сообщений приложения.

Анимации и переходы

v-snackbar поддерживает стандартные Vuetify анимации через компонент v-fade-transition или v-slide-x-transition:

<v-slide-y-transition>
  <v-snackbar v-if="snackbar" v-model="snackbar">
    Сообщение с анимацией
  </v-snackbar>
</v-slide-y-transition>
  • v-fade-transition — плавное появление и исчезновение.
  • v-slide-x-transition и v-slide-y-transition — сдвиг по горизонтали или вертикали.

Это позволяет визуально подчеркнуть появление уведомления без дополнительного CSS.

Советы по UX

  • Использовать короткие и лаконичные сообщения.
  • Не перегружать экран большим количеством снекбаров одновременно.
  • Для действий пользователя добавлять кнопки Undo или Retry.
  • Поддерживать цветовую дифференциацию: ошибки красным, успехи зелёным, предупреждения жёлтым.

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

Оглавление