Rate 评分

此组件多用于商品评价打分、服务态度评价、用户满意度等场景。

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

• 通过 max 属性设置共有多少课星星可选择
• 通过 v-model 双向绑定初始化时默认选中的星星数量
• 通过 value 属性设置初始化时默认选中的星星数量（建议使用 v-model 的方式，此属性为了向前兼容依然有效，但优先级低于 v-model）

<template>
    <fu-rate v-model="rateValue" :max="rateMax" />
</template>

<script setup>
    import { ref } from 'vue';

    // data数据
    const rateMax = ref(5);
    let rateValue = ref(3);
</script>

设置自定义样式

• 通过 activeColor 属性设置选中时星星的颜色
• 通过 inactiveColor 属性设置未选中时星星的颜色
• 通过 margin 属性设置星星的间距

<fu-rate activeColor="#31E749" inactiveColor="#bbbbbb" margin="20" />

设置禁用状态

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

<fu-rate :disabled="true" :allowHalf="true" :value="3.5"></fu-rate>

API

Rate Props

属性名	说明	类型	默认值	可选值
value/v-model	双向绑定选择星星的数量	String｜Number	0	-
max	最多可选星星的数量	Number	5	-
isFill	星星的类型，是否为实心类型, 默认为实心	Boolean	true	false
activeColor	选中时星星的颜色	String	#ffd01e	-
inactiveColor	未选中时星星的颜色	String	#e8e8e8	-
margin	星星的间距	String	0	-
allowHalf	是否允许半星	Boolean	false	true
disabled	是否禁用	Boolean	false	true
readonly	是否只读	Boolean	false	true
touchable	是否支持手势滑动	Boolean	true	false

Rate Events

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