StarRating 星级评分

星级评分组件用于让用户通过点击星标来评价内容，支持多种图标变体和颜色定制。

基础用法

通过 v-model 双向绑定评分值。

<TStarRating v-model="rating" />

预设评分

设置 modelValue 为指定数值即可预设评分。

<TStarRating :model-value="4" />

只读模式

设置 readonly 禁用交互，仅用于展示。

<TStarRating :model-value="4" readonly />

显示文字

设置 show-text 在评分右侧显示文字标签（很差/较差/一般/满意/非常满意）。

<TStarRating v-model="rating" show-text />

尺寸变体

通过 size prop 控制图标尺寸：sm / default / md / lg。

<TStarRating v-model="rating" size="lg" />

颜色变体

通过 color prop 指定填充色，使用 Tabler 颜色类名。

<TStarRating v-model="rating" color="text-red" />

图标变体

通过 icon prop 切换图标样式：star / heart / ghost / circle。

<TStarRating v-model="rating" icon="heart" color="text-red" />

半星评分

开启 allow-half 支持半星评分，鼠标悬停在星标左半侧可选择半星。

<TStarRating v-model="rating" allow-half />

清除评分

开启 clearable（默认开启），点击已选中的星标可清除评分至 0。

<TStarRating v-model="rating" clearable />

空星颜色与图标

通过 void-color 和 void-icon 分别控制未选中星标的颜色和图标。

<TStarRating v-model="rating" void-color="text-muted" void-icon="circle" color="text-primary" />

数字分数

开启 show-score 显示数字分数，score-template 可自定义显示模板。

<TStarRating v-model="rating" show-score score-template="得分：{value}/{max}" />

底部文字

开启 text-on-bottom，文字标签显示在每颗星下方。

<TStarRating v-model="rating" show-text text-on-bottom :texts="['很差','较差','一般','满意']" />

自定义星数

通过 max 设置自定义星数。

<TStarRating v-model="rating" :max="10" />

API

Props

Prop	说明	类型	默认值
modelValue	当前评分（v-model）	number	0
max	最大星数	number	5
size	图标尺寸	'sm' | 'default' | 'md' | 'lg'	'default'
color	选中星填充色	string	—
icon	选中星图标变体	'star' | 'heart' | 'ghost' | 'circle'	'star'
readonly	只读模式	boolean	false
showText	显示文字标签	boolean	false
texts	自定义提示文字数组	string[]	—
clearable	点击相同星可清除	boolean	true
allowHalf	允许半星评分	boolean	false
voidColor	未选中星填充色	string	—
voidIcon	未选中星图标变体	'star' | 'heart' | 'ghost' | 'circle'	同 icon
showScore	显示数字分数	boolean	false
scoreTemplate	分数模板	string	'{value}/{max} 分'
textOnBottom	文字在每颗星下方	boolean	false

Emits

事件	参数	说明
update:modelValue	(value: number)	评分变化