Рейтинги v-rating

Компонент v-rating в библиотеке Vuetify используется для визуального отображения и ввода рейтингов. Он представляет собой интерактивный набор иконок, каждая из которых может быть выделена в зависимости от значения рейтинга. По умолчанию используются звезды, но иконки можно заменять на любые другие символы Material Design Icons.

Основные свойства v-rating:

  • v-model – привязка текущего значения рейтинга. Поддерживает числа и массивы, в зависимости от конфигурации.
  • length – количество элементов рейтинга (звёзд по умолчанию). Значение по умолчанию — 5.
  • color – цвет активных элементов. Можно использовать стандартные цвета Vuetify (primary, secondary, success и т.д.) или кастомные.
  • background-color – цвет неактивных элементов.
  • half-increments – позволяет выставлять половинные значения рейтинга. Если включено, пользователь может выбрать 2.5, 3.5 и т.д.
  • readonly – делает компонент только для отображения, запрещая изменение рейтинга пользователем.

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

<v-rating
  v-model="rating"
  length="5"
  color="amber"
  background-color="grey lighten-2"
></v-rating>

Здесь rating – реактивное свойство в data() или setup(), которое хранит текущее значение рейтинга.

Настройка внешнего вида

Иконки можно полностью кастомизировать:

  • item-icon – иконка для обычного состояния.
  • item-label – используется для подписи элемента рейтинга.
  • empty-icon – иконка для пустого состояния (неактивные элементы).
  • full-icon – иконка для активного состояния.

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

<v-rating
  v-model="rating"
  length="5"
  item-icon="mdi-heart"
  empty-icon="mdi-heart-outline"
  color="red"
></v-rating>

При этом каждая активная иконка будет заменена на mdi-heart, а пустая останется mdi-heart-outline.

Размер элементов регулируется через свойство size:

<v-rating
  v-model="rating"
  size="40"
></v-rating>

Значение задается в пикселях. Это позволяет создавать компактные и крупные рейтинги для разных интерфейсных задач.

Работа с событиями

Компонент v-rating поддерживает события для отслеживания действий пользователя:

  • @input – срабатывает при изменении значения рейтинга. Возвращает новое значение.
  • @change – аналогично input, но вызывается только после завершения выбора, что удобно для сохранения данных на сервер.

Пример обработки события @change:

<v-rating
  v-model="rating"
  @change="saveRating"
></v-rating>

<script>
export default {
  data: () => ({
    rating: 3
  }),
  methods: {
    saveRating(value) {
      console.log('Выбран рейтинг:', value);
      // Здесь можно отправить значение на сервер
    }
  }
}
</script>

Полурейтинги и дробные значения

Чтобы разрешить выбор половинных значений, используется свойство half-increments:

<v-rating
  v-model="rating"
  half-increments
  length="5"
></v-rating>

В этом режиме можно выбрать, например, рейтинг 3.5, 4.0 или 4.5. Визуально половинная иконка будет подсвечена частично.

Динамическое создание рейтингов

Рейтинги можно формировать на основе данных из массива, что удобно для списка товаров или отзывов:

<div v-for="product in products" :key="product.id">
  <p>{{ product.name }}</p>
  <v-rating
    v-model="product.rating"
    length="5"
    color="amber"
    background-color="grey lighten-3"
  ></v-rating>
</div>

При этом каждая карточка товара получает свой интерактивный рейтинг, который сохраняется отдельно.

Использование в режиме только для отображения

Для показа уже выставленного рейтинга без возможности редактирования используется свойство readonly:

<v-rating
  v-model="averageRating"
  readonly
  color="blue"
></v-rating>

Можно комбинировать с dense для компактного отображения в таблицах или списках:

<v-rating
  v-model="averageRating"
  readonly
  dense
></v-rating>

Доступность и клавиатурная навигация

v-rating поддерживает управление с клавиатуры:

  • Стрелки влево/вправо изменяют значение.
  • Enter подтверждает выбор.
  • Для улучшения доступности рекомендуется использовать aria-label и добавлять текстовые подписи через item-label.

Интеграция с формами

Рейтинг можно использовать внутри v-form для валидации:

<v-form ref="form">
  <v-rating
    v-model="rating"
    length="5"
    color="green"
    rules="[v => v > 0 || 'Выберите рейтинг']"
  ></v-rating>
  <v-btn @click="submitForm">Отправить</v-btn>
</v-form>

<script>
export default {
  data: () => ({ rating: 0 }),
  methods: {
    submitForm() {
      if (this.$refs.form.validate()) {
        console.log('Форма отправлена с рейтингом', this.rating);
      }
    }
  }
}
</script>

Использование rules позволяет добавить проверку, например, на минимальное значение рейтинга.

Стилизация через CSS

Дополнительно можно изменять внешний вид через селекторы Vuetify или классы:

.v-rating .v-icon {
  font-size: 36px;
}
.v-rating .v-icon--empty {
  opacity: 0.3;
}

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

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

Оглавление