Rate

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

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

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

import { ElRate } from 'element-plus';

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

<el-rate v-model="value"></el-rate>

<script setup>
import { ref } from 'vue';

const value = ref(3);
</script>

Здесь v-model связывает текущее значение рейтинга с реактивной переменной value. В примере пользователь видит три заполненные звезды.

Настройка количества элементов

Количество элементов, отображаемых в рейтинге, задается через атрибут :count:

<el-rate v-model="value" :count="10"></el-rate>

По умолчанию количество элементов равно 5.

Изменение размера

Размер иконок можно регулировать через атрибут :size:

<el-rate v-model="value" :size="36"></el-rate>

Атрибут принимает значение в пикселях и изменяет высоту и ширину каждой звезды.

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

Для возможности выбора половинных значений используется :allow-half:

<el-rate v-model="value" :allow-half></el-rate>

Теперь пользователь может установить рейтинг, например, 3.5, кликая между звездами.

Настройка цвета иконок

Цвета заполненных и пустых иконок настраиваются через :colors и :void-color:

<el-rate
  v-model="value"
  :colors="['#F7BA2A', '#F7BA2A', '#F7BA2A']"
  void-color="#C6D1DE">
</el-rate>
  • colors – массив цветов для различных уровней заполнения.
  • void-color – цвет пустых иконок.

Можно также задавать :disabled-color для неактивного состояния рейтинга.

Настройка пользовательских иконок

Rate поддерживает кастомные иконки через слоты icon и void-icon:

<el-rate v-model="value">
  <template #icon>
    <i class="el-icon-heart"></i>
  </template>
  <template #void-icon>
    <i class="el-icon-star-off"></i>
  </template>
</el-rate>

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

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

Чтобы сделать рейтинг только для отображения, используется атрибут :disabled:

<el-rate v-model="value" :disabled></el-rate>

Пользователь не сможет изменить значение, но визуально рейтинг будет отображаться.

Управление отзывчивостью и событиями

С помощью события @change можно отслеживать изменения рейтинга:

<el-rate v-model="value" @change="handleChange"></el-rate>

<script setup>
function handleChange(val) {
  console.log('Новый рейтинг:', val);
}
</script>

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

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

Rate может использоваться внутри форм Element Plus. Для валидации достаточно добавить rules:

<el-form :model="form" ref="formRef">
  <el-form-item label="Рейтинг" prop="rate">
    <el-rate v-model="form.rate" :allow-half></el-rate>
  </el-form-item>
</el-form>

<script setup>
import { ref } from 'vue';

const form = ref({
  rate: 0
});

const formRef = ref(null);
</script>

Динамическое обновление

Значение Rate можно обновлять динамически, что позволяет интегрировать его с API:

<el-rate v-model="rating" :count="ratingCount"></el-rate>

<script setup>
import { ref, onMounted } from 'vue';

const rating = ref(0);
const ratingCount = ref(5);

onMounted(async () => {
  const response = await fetch('/api/getRating');
  const data = await response.json();
  rating.value = data.value;
  ratingCount.value = data.count;
});
</script>

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

Элемент Rate можно стилизовать с помощью классов **.el-rate, .el-rate__item, .el-rate__icon**:

.el-rate__item {
  margin-right: 8px;
}
.el-rate__icon {
  transition: transform 0.3s;
}
.el-rate__icon:hover {
  transform: scale(1.2);
}

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

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

Rate поддерживает локализацию через Vue i18n, если требуется вывод подсказок при наведении:

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

Атрибут :show-text включает отображение текста рядом с рейтингом, а :texts задаёт массив подсказок.

Заключение

Компонент Rate в Element Plus гибко настраивается по количеству и размеру элементов, поддерживает дробные значения, кастомные иконки и интеграцию с формами. Его возможности позволяют создавать удобные и визуально привлекательные системы оценки в веб-приложениях на Vue.js.

Оглавление