• Vant React

Rate 评分

介绍

用于对事物进行评级操作。

引入

import { Rate } from "@taroify/core"

代码演示

基础用法

通过 value 来绑定当前评分值。

<Rate value={3} />

自定义图标

通过 fullIcon 属性设置选中时的图标,voidIcon 属性设置未选中时的图标。

<Rate defaultValue={3} icon={<Like />} emptyIcon={<LikeOutlined />} />

自定义样式

通过 size 属性设置图标大小,css 设置选中时的颜色,emptyIcon 设置未选中时的颜色。

 <Rate className="custom-color" defaultValue={3} allowHalf size={25} emptyIcon={<Star />} />
.custom-color {
  --rate-icon-empty-color: #eee;
  --rate-icon-full-color: #ffd21e;
}

半星

设置 allowHalf 属性后可以选中半星。

<Rate defaultValue={3} allowHalf />

自定义数量

通过 count 属性设置评分总数。

<Rate defaultValue={3} count={6} />

禁用状态

通过 disabled 属性来禁用评分。

<Rate defaultValue={3} disabled />

只读状态

通过 readonly 属性将评分设置为只读状态。

<Rate defaultValue={3} readonly />

只读状态显示小数

设置 readonlyallowHalf 属性后,Rate 组件可以展示任意小数结果。

<Rate defaultValue={3.3} readonly allowHalf />

API

Props

参数 说明 类型 默认值
defaultValue 默认当前分值 number -
value 当前分值 number -
count 图标总数 number | string 5
size 图标大小,默认单位为px number | string 20px
gutter 图标间距,默认单位为px number | string 4px
icon 选中时的图标 string <Star />
emptyIcon 未选中时的图标 string <StarOutlined />
allowHalf 是否允许半选 boolean false
readonly 是否为只读状态,只读状态下无法修改评分 boolean false
disabled 是否禁用评分 boolean false
touchable 是否可以通过滑动手势选择评分 boolean true

Events

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