Rate 评分 1.0.3

手机扫码预览

01:50



---

组件名：rice-rate

对事物进行评分，支持滑动选择，支持半星选择。1.0.3 版本开始支持

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

基础用法

通过 v-model 绑定当前评分值

<rice-rate v-model="value"></rice-rate>

自定义图标

• 通过 icon 自定义选中时的图标
• 通过 void-icon 自定义未选中时的图标

<rice-rate v-model="value" icon='like-fill' void-icon="like"></rice-rate>

自定义数量

通过 count 自定义数量

<rice-rate v-model="value2" :count="3"></rice-rate>

半星选择

通过 allow-half 设置选择半星

<rice-rate v-model="value3" allow-half></rice-rate>

自定义颜色

• 通过 color 设置选中时的颜色
• 通过 void-color 设置未选中时的颜色

<rice-rate v-model="value4" color="#e6a23c" void-color="#dcdcdc" void-icon="star-fill" allow-half></rice-rate>

自定义大小

• 通过 size 设置大小
• 通过 gutter 设置图标的间距

<rice-rate v-model="value5" size="28px" gutter="6px" ></rice-rate>

可清空

当 clearable 属性设置为 true，再次点击相同的值时，可以将值重置为 0

<rice-rate v-model="value6" clearable allow-half></rice-rate>

禁止滑动选择

当 touchable 属性设置为 false，不可滑动选择

<rice-rate v-model="value7" :touchable="false"></rice-rate>

只读和禁用

readonly 为只读 disabled为禁用

<rice-rate :model-value="3" readonly></rice-rate>
<rice-rate :model-value="3" disabled></rice-rate>

API

Props

属性名	类型	说明	默认值
v-model\model-value	Number	当前分值	-
count	Number	图标总数	5
icon	String	选中时的图标名称或图片链接，等同于 Icon 组件的 name 属性	star-fill
void-icon	String	未选中时的图标名称或图片链接，等同于 Icon 组件的 name 属性	star
size	Number|String	图标大小，默认值	22px
gutter	Number|String	图标间距,默认值	4px
color	String	选中时的颜色	-
void-color	String	未选中时的颜色	-
allow-half	Boolean	是否允许半选	false
clearable	Boolean	值为true是，再次点击相同的值时，可以将值重置为 0	false
readonly	Boolean	是否只读	-
disabled	Boolean	是否禁用	-
touchable	Boolean	是否可以通过滑动手势选择评分	true
custom-style	Object	自定义样式	-

Events

事件名	说明	回调参数
change	当前分值变化时触发的事件	(value:number)

类型定义

组件导出如下类型

// 组件类型
const rateRef=ref<RiceRateComponentPublicInstance|null>(null)