Rate 评分

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title="评分">
		<t-card title="评分组件" class="tdr-tdb-mltr.30"
			sub-title="灵活多变，支持自定义评分星数，设定评分下限，并提供半星评分选项，以精细反映评价。用户可通过简单的触摸滑动或鼠标拖动."></t-card>
		<introduction title="基础功能">
			<t-rate v-model="rateVal1"></t-rate>
			<t-rate v-model="rateVal2" type="success"></t-rate>
			<t-rate v-model="rateVal3" type="error"></t-rate>
			<t-rate v-model="rateVal4" type="primary"></t-rate>
			<t-rate v-model="rateVal5" type="warning"></t-rate>
		</introduction>
		<introduction title="修改颜色">
			<t-rate v-model="rateVal6" activeColor="#2979FF" inactiveColor="#55aa00"></t-rate>
		</introduction>
		<introduction title="设置大小80rpx">
			<t-rate v-model="rateVal7" class="s.80" activeColor="#2979FF"></t-rate>
		</introduction>
		<introduction title="设置间距10rpx">
			<t-rate v-model="rateVal8" activeColor="#2979FF" gutter="10rpx"></t-rate>
		</introduction>
		<introduction title="未选中星星颜色">
			<t-rate v-model="rateVal9" activeColor="#2979FF" inactiveColor="#2979FF"></t-rate>
		</introduction>
		<introduction title="最小选择3分">
			<t-rate v-model="rateVal10" activeColor="#2979FF" :minCount="3"></t-rate>
		</introduction>
		<introduction title="只读">
			<t-rate v-model="rateVal11" activeIcon="heart-fill" type="error" :readonly="true"
				inactiveIcon="heart"></t-rate>
		</introduction>
		<introduction title="禁用">
			<t-rate v-model="rateVal12" activeColor="#2979FF" :disabled="true"></t-rate>
		</introduction>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {
				rateVal1: 3,
				rateVal2: 2,
				rateVal3: 1,
				rateVal4: 1,
				rateVal5: 1,
				rateVal6: 1,
				rateVal7: 1,
				rateVal8: 1,
				rateVal9: 1,
				rateVal10: 1,
				rateVal11: 1,
				rateVal12: 1,
				icon: 'star',
			};
		},
		methods: {

		}
	}
</script>

Props

名称	描述	类型	默认值
size	星星的大小	String	"l"
modelValue	双向绑定的选中星星数量	Number	1
count	显示的星星数量	Number	5
readonly	是否只读	Boolean	false
inactiveColor	未选中时的颜色	String	"#B2B2B2"
activeColor	选中的颜色	String	""
gutter	星星之间的间距，单位为px	String	"15rpx"
minCount	最少能选择的星星个数	Number	1
activeIcon	选中时的图标（星星）	String	"star-fill"
inactiveIcon	未选中时的图标（星星）	String	"star"

Events

名称	描述
click	当星星被点击时触发
update:modelValue	当绑定值更新时触发
change	当评分改变时触发

Methods

名称	描述
reset	重置评分
getValue	获取当前评分