t-rate

Rate 评分

组件介绍

t-rate 评分组件灵活多变，支持自定义评分星数，设定评分下限，并提供半星评分选项，以精细反映评价。用户可通过简单的触摸滑动或鼠标拖动进行评分操作。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

基础用法参考 demo/rate/rate.uvue，通过 v-model 绑定评分值。

<!-- 基础评分 -->
<t-rate v-model="value"></t-rate>

<!-- 自定义星星数量 -->
<t-rate v-model="value" :count="10"></t-rate>

<!-- 只读模式 -->
<t-rate v-model="value" readonly></t-rate>

<!-- 自定义图标 -->
<t-rate v-model="value" activeIcon="heart-fill" inactiveIcon="heart"></t-rate>

Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	true
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'large'
modelValue	双向绑定的值	number	1
count	显示的星星数量	number	5
readonly	是否为只读	boolean	false
inactiveClass	未选中时的组件样式	string	'c-#B2B2B2'
activeClass	选中时的组件样式	string	''
iconClass	图标样式	string	''
minCount	最少能选择的星星个数	number	1
activeIcon	选中时的图标	string	'star-fill'
inactiveIcon	未选中时的图标	string	'star'

Events

事件名	说明	回调参数
change	评分改变时触发	value: number
click	点击时触发	-
update:modelValue	双向绑定值更新时触发	value: number

外部类

类名	说明
inactive-class	未选中时的样式
active-class	选中时的样式
icon-class	图标样式