Rate评分

Rate评分:可设置大小颜色,支持半星,支持手势touch选择。

组件结构

<template>
	<view class="tui-rate-class tui-rate-box" @touchmove="touchMove">
		<block v-for="(item,index) in quantity" :key="index">
			<view class="tui-icon tui-relative" :class="['tui-icon-collection'+(hollow && (current<=index || (disabled && current<=index+1))?'':'-fill')]"
			 :data-index="index" @tap="handleTap" :style="{fontSize:size+'px',color:(current>index+1 || (!disabled && current>index))?active:normal}">
				<view class="tui-icon tui-icon-main tui-icon-collection-fill" v-if="disabled && current==index+1" :style="{fontSize:size+'px',color:active,width:percent+'%'}"></view>
			</view>
		</block>
	</view>
</template>

组件脚本

<script>
	export default {
		name: "tuiRate",
		
		...省略n行
	}
</script>

组件样式

... 此处省略n行

脚本说明

props

参数 类型 描述 默认值
quantity Number 数量 5
current Number 当前选中星星 0
score [Number, String] 当前选中星星分数(大于0,小于等于1的数) 1
disabled Boolean 是否禁用点击 false
size Number 星星大小 20
normal String 未选中颜色 #b2b2b2
active String 选中颜色 #e41f19
hollow Boolean 未选中是否为空心 false

methods

名称 描述
@change 评分改变

示例

H5预览地址

https://www.thorui.cn/h5/#/pages/extend/rate/rate

H5二维码

小程序二维码