Rate

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

Подключение и базовое использование

Для работы с компонентом Rate необходимо импортировать его из библиотеки Naive UI:

import { NRate } from 'naive-ui';

В шаблоне Vue компонент используется следующим образом:

<n-rate v-model:value="rating" :max="5" />

Здесь:

  • v-model:value — двусторонняя привязка значения рейтинга.
  • :max — максимальное количество звездочек (по умолчанию 5).

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

import { ref } from 'vue';

export default {
  setup() {
    const rating = ref(3);
    return { rating };
  }
}

Основные свойства

Свойство Тип Описание
value number Текущее значение рейтинга.
max number Максимальное количество элементов рейтинга.
disabled boolean Блокировка изменения рейтинга.
allow-half boolean Разрешение выбора половинного значения.
size string Размер звезд (например, small, medium, large).
icon string / component Кастомная иконка вместо стандартной звезды.
show-text boolean Отображение текстового описания рейтинга.
text-color string Цвет текста рейтинга.
texts string[] Массив текстовых описаний для каждого значения рейтинга.

Полу-звезды и дробные значения

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

<n-rate v-model:value="rating" :allow-half="true" :max="5" />

При этом можно получать значение типа 3.5, что удобно для точной оценки.

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

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

<n-rate v-model:value="rating" :icon="customIcon" :max="5" />

customIcon может быть компонентом Vue или SVG элементом. Также можно задать отдельные иконки для заполненной и пустой части с помощью слотов:

<n-rate v-model:value="rating" :max="5">
  <template #icon="{ filled }">
    <svg v-if="filled" ...>...</svg>
    <svg v-else ...>...</svg>
  </template>
</n-rate>

Отображение текста рейтинга

Свойство texts позволяет отображать текстовое описание текущего рейтинга:

<n-rate
  v-model:value="rating"
  :texts="['Очень плохо','Плохо','Нормально','Хорошо','Отлично']"
  show-text
/>

Можно комбинировать с text-color для изменения цвета текста:

<n-rate
  v-model:value="rating"
  :texts="['Плохо','Средне','Хорошо']"
  show-text
  text-color="#ff6600"
/>

Размер и стилизация

Свойство size управляет размером иконок:

<n-rate v-model:value="rating" size="large" />

Поддерживаются стандартные значения: small, medium, large.

Для полной кастомизации внешнего вида можно использовать CSS-переменные Naive UI:

.n-rate-item {
  --n-rate-item-color: #f5a623;
  --n-rate-item-color-hover: #ffa500;
}

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

Отключение изменения рейтинга

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

<n-rate v-model:value="rating" :disabled="true" />

Компонент остается видимым, но пользователь не может кликать по звездам.

События

Компонент Rate поддерживает основные события:

  • on-update:value — срабатывает при изменении рейтинга:
<n-rate
  v-model:value="rating"
  @update:value="handleRatingChange"
/>
function handleRatingChange(newValue) {
  console.log('Выбранный рейтинг:', newValue);
}
  • on-hover-change — срабатывает при наведении на другую звезду, позволяет динамически отображать подсказки или предварительный рейтинг.

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

Компонент легко интегрируется с формами Naive UI (n-form-item), поддерживает валидацию и правила:

<n-form>
  <n-form-item label="Рейтинг" path="rating" :rules="[{ required: true, message: 'Выберите рейтинг' }]">
    <n-rate v-model:value="rating" />
  </n-form-item>
</n-form>

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

С половинными значениями и текстами:

<n-rate
  v-model:value="rating"
  :allow-half="true"
  :texts="['Очень плохо','Плохо','Средне','Хорошо','Отлично']"
  show-text
  size="large"
/>

С кастомными иконками и стилями:

<n-rate v-model:value="rating" :max="5">
  <template #icon="{ filled }">
    <span :style="{ color: filled ? '#ff4500' : '#ccc' }">★</span>
  </template>
</n-rate>

Только отображение рейтинга без изменения:

<n-rate v-model:value="rating" :disabled="true" size="medium" />

Компонент Rate в Naive UI сочетает в себе гибкость кастомизации, простоту использования и интеграцию с формами, что делает его универсальным инструментом для интерфейсов оценки и отзывов.

Оглавление