Rate 评分 | uView Next - 企业级、高质量、更贴近业务场景的 uniapp ui框架

# Rate 评分

该组件一般用于满意度调查，星型评分的场景。

# 基本使用

通过 count 参数设置总共有多少颗星星可选择
通过 v-model 双向绑定初始化时默认选中的星星数量

<template>
	<un-rate :count="count" v-model="value"></un-rate>
</template>

<script>
	export default {
		data() {
			return {
				count: 4,
				value: 2
			}
		}
	}
</script>
✅ Copy success!

# 自定义样式

通过 active-color 设置选中的星星的颜色
通过 inactive-color 设置未选中时星星的颜色
通过 gutter 设置星星的间距，左右内边距各占 gutter 的一半

<un-rate active-color="#FA3534" inactive-color="#b2b2b2" gutter="20"></un-rate>
✅ Copy success!

# 自定义图标

通过 active-icon 设置激活的图标
通过 inactive-icon 设置未激活的图标

下方示例为使用心形图标替代默认的星星图标：

<un-rate activeIcon="heart-fill" inactiveIcon="heart"></un-rate>
✅ Copy success!

# 最少选中的数量

<un-rate :minCount="5"></un-rate>
✅ Copy success!

# 禁用状态

禁用下，无法点击或者滑动选择，但是可以通过 value 设置默认选中的数量，禁用状态下用来展示分数，允许出现半星：

<un-rate :value="3.7" disabled></un-rate>
✅ Copy success!

# 只读状态

只读下，无法点击或者滑动选择，但是可以通过 value 设置默认选中的数量，禁用状态下用来展示分数，允许出现半星：

<un-rate :value="3.7" readonly></un-rate>
✅ Copy success!

# 监听change事件

当用户选择不同的评分时，可以通过 @change 事件监听评分变化：

<template>
	<view>
		<un-rate :count="5" v-model="rateValue" @change="onRateChange" />
		<text class="rate-text">当前评分：{{ rateValue }}</text>
	</view>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const rateValue = ref<number>(3)

const onRateChange = (value: number) => {
	console.log('评分发生变化:', value)
	// 可以在这里处理评分变化逻辑，比如提交到服务器等
}
</script>

<style>
.rate-text {
	margin-top: 20rpx;
	font-size: 28rpx;
	color: #666;
}
</style>
✅ Copy success!

# API

# Props

参数	说明	类型	默认值	可选值
value	双向绑定选择星星的数量	String \| Number	1	-
count	最多可选的星星数量	String \| Number	5	-
disabled	是否禁止用户操作	Boolean	false	true
readonly	是否只读	Boolean	false	true
size	星星的大小，单位 px	String \| Number	16	-
inactiveColor	未选中星星的颜色	String	#b2b2b2	-
activeColor	选中的星星颜色	String	#FA3534	-
gutter	星星之间的距离	String \| Number	4	-
minCount	最少选中星星的个数	String \| Number	1	-
allowHalf	是否允许半星选择	Boolean	false	true
activeIcon	选中时的图标名，只能为 uView 的内置图标	String	star-fill	-
inactiveIcon	未选中时的图标名，只能为 uView 的内置图标	String	star	-
touchable	是否可以通过滑动手势选择评分	Boolean	true	false

# Events

事件名	说明	参数名称	参数说明
change	选中的星星发生变化时触发	value:number	当前选中的星星的数量，如果使用 `v-model` 双向绑定方式，无需监听此事件

← AreaPicker 地区选择器 Search 搜索 →