# t-rate

Rate 评分

t-rate 组件介绍

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

t-rate 平台兼容

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

t-rate 基础用法

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

<template>
	<view>
		<tui-theme-switch></tui-theme-switch>
		<t-card title="评分组件"
				class="tdr tdb mltr-15"
				sub-title="灵活多变，支持自定义评分星数，设定评分下限，并提供半星评分选项，以精细反映评价。用户可通过简单的触摸滑动或鼠标拖动-"></t-card>
		<introduction title="基础功能-type">
			<t-rate class="r-10 p-10 mb-15"
					v-model="rateVal"></t-rate>
			<t-rate class="r-10 p-10 mb-15"
					v-model="rateVal"
					type="success"></t-rate>

			<t-rate class="r-10 p-10 mb-15"
					v-model="rateVal"
					type="primary"></t-rate>
			<t-rate class="r-10 p-10"
					v-model="rateVal"
					type="warning"></t-rate>
		</introduction>
		<introduction title="基础功能-size">
			<t-rate class="r-10 p-10 mb-15"
					v-model="rateVal"
					size="large"
					type="success"></t-rate>
			<t-rate class="r-10 p-10 mb-15"
					v-model="rateVal"
					size="medium"
					type="error"></t-rate>
			<t-rate class="r-10 p-10 mb-15"
					v-model="rateVal"
					size="small"
					type="primary"></t-rate>
			<t-rate class="r-10 p-10"
					v-model="rateVal"
					size="mini"
					type="warning"></t-rate>
		</introduction>
		<introduction title="修改颜色">
			<t-rate class="r-10 p-10"
					v-model="rateVal"
					active-class="c-#2979FF!"
					inactive-class="c-#55aa00!"
					icon-class="s-40!"></t-rate>
		</introduction>
		<introduction title="设置大小80px">
			<t-rate class="r-10 p-10"
					v-model="rateVal"
					activeIcon="heart-fill"
					inactiveIcon="heart"
					icon-class="s-40!"
					active-class="c-#2979FF"></t-rate>
		</introduction>
		<introduction title="设置间距10px">
			<t-rate class="r-10 p-10"
					v-model="rateVal"
					active-class="c-#2979FF"
					icon-class="mr-10"></t-rate>
		</introduction>
		<introduction title="未选中星星颜色">
			<t-rate class="r-10 p-10"
					v-model="rateVal"
					active-class="c-#2979FF"
					inactive-class="c-#2979FF"></t-rate>
		</introduction>
		<introduction title="最小选择3分">
			<t-rate class="r-10 p-10"
					v-model="rateVal1"
					active-class="#2979FF"
					:minCount="3"></t-rate>
		</introduction>
		<introduction title="只读">
			<t-rate class="r-10 p-10"
					v-model="rateVal"
					type="error"
					:readonly="true"></t-rate>
		</introduction>
		<introduction title="禁用">
			<t-rate class="r-10 p-10"
					v-model="rateVal"
					active-class="#2979FF"
					:disabled="true"></t-rate>
		</introduction>
	</view>
</template>

<script setup>
	const rateVal = ref(-10)
	const rateVal1 = ref(1)
	const icon = ref('star')
</script>

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'

t-rate Events

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

外部类

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