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 快速佈局屬性	—	—

Events

事件	說明	回呼參數
input	v-model 事件	(val)
change	評分變化時觸發	(val)

無障礙

可互動態為 role="radiogroup"，每星 role="radio" + aria-checked；readonly 態為 role="img" + aria-label 星級文字；鍵盤 ←/→ 選星。