Valoración

Valoración por estrellas. Admite el límite de estrellas con max, las medias estrellas con allowHalf, el carácter personalizado con character, la solo lectura y la deshabilitación, y el texto de puntuación con showScore (plantilla scoreTemplate).

Valoración

<template>
  <div class="demo-col" style="gap: 22px">
    <div>
      <LhRate v-model="score" :max="5" show-score score-template="{n} estrellas" />
      <p class="demo-note">Valor controlado: {{ score }} (showScore + scoreTemplate="{n} estrellas")</p>
    </div>
    <div>
      <LhRate v-model="half" :max="5" allow-half />
      <p class="demo-note">allowHalf admite medias estrellas: {{ half }}</p>
    </div>
    <div>
      <LhRate v-model="custom" :max="5" character="◈" />
      <p class="demo-note">character="◈": carácter personalizado</p>
    </div>
    <div>
      <LhRate :model-value="3.5" :max="5" readonly />
      <p class="demo-note">readonly: solo lectura (role="img"; el lector de pantalla anuncia la valoración)</p>
    </div>
    <div>
      <LhRate v-model="score" :max="5" disabled />
      <p class="demo-note">disabled: deshabilitado</p>
    </div>
  </div>
</template>

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

Props

Propiedad	Descripción	Tipo	Predeterminado
v-model	Valoración actual (model: modelValue/input)	number	—
max	Límite de estrellas	number	5
allowHalf	Admitir medias estrellas	boolean	false
readonly	Solo lectura (el lector de pantalla emite el texto de la valoración)	boolean	false
disabled	Deshabilitar	boolean	false
character	Carácter personalizado (★ por defecto)	string	'★'
showScore	Mostrar el texto de la puntuación	boolean	false
scoreTemplate	Plantilla de puntuación (marcador {n})	string	'{n}'
sx	Propiedad de diseño rápido sx	—	—

Eventos

Evento	Descripción	Parámetro de callback
input	Evento de v-model	(val)
change	Se dispara al cambiar la valoración	(val)

Accesibilidad

El estado interactivo usa role="radiogroup"; cada estrella, role="radio" + aria-checked; el estado readonly usa role="img" + aria-label con el texto de la valoración; las teclas ←/→ seleccionan las estrellas.