Оценка

Звёздный рейтинг. Поддержка максимума звёзд max, половинных звёзд allowHalf, пользовательского символа character, режимов только для чтения и отключения, а также текста оценки showScore (шаблон scoreTemplate).

Оценка

<template>
  <div class="demo-col" style="gap: 22px">
    <div>
      <LhRate v-model="score" :max="5" show-score score-template="{n} зв." />
      <p class="demo-note">Контролируемое значение: {{ score }} (showScore + scoreTemplate="{n} зв.")</p>
    </div>
    <div>
      <LhRate v-model="half" :max="5" allow-half />
      <p class="demo-note">allowHalf разрешает половинные звёзды: {{ half }}</p>
    </div>
    <div>
      <LhRate v-model="custom" :max="5" character="◈" />
      <p class="demo-note">character="◈" — пользовательский символ</p>
    </div>
    <div>
      <LhRate :model-value="3.5" :max="5" readonly />
      <p class="demo-note">readonly — только для чтения (role="img", скринридер озвучивает текст со звёздами)</p>
    </div>
    <div>
      <LhRate v-model="score" :max="5" disabled />
      <p class="demo-note">disabled — отключено</p>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({ score: 3, half: 2.5, custom: 4 }),
}
</script>

Props

Проп	Описание	Тип	По умолчанию
v-model	Текущая оценка (model: modelValue/input)	number	—
max	Максимум звёзд	number	5
allowHalf	Разрешить половинные звёзды	boolean	false
readonly	Только для чтения (скринридер выводит текст с количеством звёзд)	boolean	false
disabled	Отключение	boolean	false
character	Пользовательский символ (по умолчанию ★)	string	'★'
showScore	Показывать текст с оценкой	boolean	false
scoreTemplate	Шаблон оценки (плейсхолдер {n})	string	'{n}'
sx	Проп sx для быстрого макета	—	—

Events

Событие	Описание	Параметры обратного вызова
input	Событие v-model	(val)
change	Срабатывает при изменении оценки	(val)

Доступность

В интерактивном состоянии — role="radiogroup", каждая звезда role="radio" + aria-checked; в режиме readonly — role="img" + aria-label с текстом оценки; выбор звезды клавишами ←/→.