Score 评分

组件类型：WxScoreComponentPublicInstance

评分组件，用于常见的评分场景。

平台兼容性

Android uni-app-x	iOS uni-app-x	web	小程序
√	×	√	×

基础使用

<template>
	<wx-navbar title="评分"></wx-navbar>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
		<view class="wx-page">
			<text class="wx-page-title">基础用法</text>
			<wx-score :data="4.5" @change="scoreChange"></wx-score>
		</view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup>
	let scoreChange = (score: number)=> {
		console.log(score)
	}
</script>

默认评分

通过设置 data 属性，来指定默认评分(默认0，范围为 0 ~ total)，可带小数点(四舍五入)

<wx-score :data="4.5" @change="scoreChange"></wx-score>

自定义数量

通过设置 total 属性，来指定自定义数量

<wx-score :data="4" :total="7" @change="scoreChange"></wx-score>

自定义颜色

通过设置 color 属性，来指定自定义颜色

<wx-score :data="4.5" color="#fecc3f" @change="scoreChange"></wx-score>

只读状态

通过设置 readonly 属性为 true，来指定只读状态

<wx-score :data="3.5" :readonly="true" @change="scoreChange"></wx-score>

禁用状态

通过设置 disabled 属性为 true，来指定禁用状态

<wx-score :data="3" :disabled="true" @change="scoreChange"></wx-score>

API

Props

名称	类型	默认值	描述
data	number	0	默认评分
total	number	5	图标总数
readonly	Boolean	false	是否为只读状态，只读状态下无法修改评分
disabled	Boolean	false	是否为禁用状态
color	string(string.ColorString)	#ee0a24	图标颜色
size	number	16	图标大小

Events

名称	类型	默认值	描述
@change	(score: number) => void	-	当前评分变化时触发的事件

演示效果