Rate 評分

星級評分：唯讀展示 / 互動打分 / 半星 / 自訂字元與數量。

基礎用法

基礎用法

<script setup>
import { ref } from 'vue'
const rate1 = ref(3)
</script>

<template>
  <LhRate v-model="rate1" />
</template>

<script>
export default {
  data() {
    return { rate1: 3 }
  },
}
</script>

<template>
  <LhRate v-model="rate1" />
</template>

半星與唯讀

半星 / 唯讀

★★★★★4.5 星

<script setup>
import { ref } from 'vue'
const rate2 = ref(3.5)
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate2" allow-half />
    <LhRate :model-value="4.5" readonly allow-half show-score />
  </div>
</template>

<script>
export default {
  data() {
    return { rate2: 3.5 }
  },
}
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate2" allow-half />
    <LhRate :model-value="4.5" readonly allow-half show-score />
  </div>
</template>

max 自訂星級總數，disabled 停用互動，character 自訂評分符號。

自訂

<script setup>
import { ref } from 'vue'
const rate3 = ref(8)
const rate4 = ref(3)
const rate5 = ref(4)
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate3" :max="10" />
    <LhRate v-model="rate4" disabled />
    <LhRate v-model="rate5" character="茶" />
  </div>
</template>

<script>
export default {
  data() {
    return { rate3: 8, rate4: 3, rate5: 4 }
  },
}
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate3" :max="10" />
    <LhRate v-model="rate4" disabled />
    <LhRate v-model="rate5" character="茶" />
  </div>
</template>

API

LhRate Props

屬性名	說明	類型	預設值
modelValue	目前評分（受控 v-model）	number	0
max	星數上限	number	5
allowHalf	允許半星	boolean	false
readonly	唯讀（輸出星級文字供螢幕閱讀器朗讀）	boolean	false
disabled	停用	boolean	false
character	自訂字元	string	—
showScore	顯示分數文字	boolean	false
scoreTemplate	分數模板（{n} 佔位）	string	—
sx	sx 快速版面配置屬性	LhSxProps	—

Events

事件名	說明	回呼參數
update:modelValue	評分變化時觸發，搭配 v-model 使用	(value: number)
change	評分變化時觸發（點選與鍵盤操作均會觸發）	(value: number)

無障礙

• 互動態為 role="radiogroup"，每顆星為真實可聚焦按鈕（roving tabindex），方向鍵調分、Home/End 歸零/打滿
• 半星模式鍵盤按 0.5 步進
• 唯讀態輸出 role="img" + aria-label="n 星" 供螢幕閱讀器朗讀
• :focus-visible 焦點環

類型定義

本元件對外匯出的 TypeScript 類型結構如下（自動提取自 packages/components/rate/src/types.ts 與 @lh-ui/share/core/* 原始碼，點選各條目展開檢視完整定義；屬性說明見上方 Props 表）：

LhRateProps

export interface LhRateProps {
  /** 目前評分（受控 v-model） */
  modelValue?: number
  /** 星數上限 */
  max?: number
  /** 允許半星 */
  allowHalf?: boolean
  /** 唯讀（輸出星級文字供螢幕閱讀器朗讀） */
  readonly?: boolean
  disabled?: boolean
  /** 自訂字元（預設 ★） */
  character?: string
  /** 顯示分數文字 */
  showScore?: boolean
  /** 分數模板（{n} 佔位） */
  scoreTemplate?: string
  /** sx 快速版面配置屬性 */
  sx?: LhSxProps
}

常數

本元件用到的公開常數如下（可在 Props 表的「類型 / 預設值」列點選同名條目跳轉至此）：

LH_RATE_MAX_DEFAULT _{（來自 @lh-ui/share/core/rate）}

/** 預設星數 */
export const LH_RATE_MAX_DEFAULT = 5