Rate 评分

引入

app.jsonindex.json中引入组件,详细介绍见快速上手

  1. "usingComponents": {
  2. "van-rate": "@vant/weapp/rate/index"
  3. }

代码演示

基础用法

  1. <van-rate value="{{ value }}" bind:change="onChange" />
  1. Page({
  2. data: {
  3. value: 3,
  4. },
  5. onChange(event) {
  6. this.setData({
  7. value: event.detail,
  8. });
  9. },
  10. });

自定义图标

  1. <van-rate
  2. value="{{ value }}"
  3. icon="like"
  4. void-icon="like-o"
  5. bind:change="onChange"
  6. />

自定义样式

  1. <van-rate
  2. value="{{ value }}"
  3. size="{{ 25 }}"
  4. color="#ee0a24"
  5. void-color="#eee"
  6. void-icon="star"
  7. bind:change="onChange"
  8. />

半星

  1. <van-rate
  2. value="{{ value }}"
  3. size="{{ 25 }}"
  4. allow-half
  5. color="#ee0a24"
  6. void-color="#eee"
  7. void-icon="star"
  8. bind:change="onChange"
  9. />

自定义数量

  1. <van-rate value="{{ value }}" count="{{ 6 }}" bind:change="onChange" />

禁用状态

  1. <van-rate disabled value="{{ value }}" bind:change="onChange" />

只读状态

  1. <van-rate readonly value="{{ value }}" bind:change="onChange" />

API

Props

参数说明类型默认值版本
name在表单内提交时的标识符string--
value当前分值number--
count图标总数number5-
size图标大小,默认单位为 pxstring | number20px-
gutter图标间距,默认单位为 pxstring | number4px
color选中时的颜色string#ffd21e-
void-color未选中时的颜色string#c7c7c7-
icon选中时的图标名称或图片链接,可选值见 Icon 组件stringstar-
void-icon未选中时的图标名称或图片链接,可选值见 Icon 组件stringstar-o-
allow-half是否允许半选booleanfalse-
readonly是否为只读状态 booleanfalse-
disabled是否禁用评分booleanfalse-
disabled-color禁用时的颜色string#bdbdbd-
touchable是否可以通过滑动手势选择评分booleantrue-

Events

事件名称说明回调参数
change当前分值变化时触发的事件event.detail:当前分值

外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类

Rate 评分 - 图1