Rate 평점

별점 평가입니다. 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 레이아웃 단축 속성	—	—

이벤트

이벤트	설명	콜백 매개변수
input	v-model 이벤트	(val)
change	평점이 변경될 때 발생	(val)

접근성

상호작용 가능 상태는 role="radiogroup", 각 별은 role="radio" + aria-checked입니다. readonly 상태는 role="img" + aria-label 별점 텍스트이며, 키보드 ←/→로 별을 선택합니다.