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