Back to Vant Weapp

Rate 评分

packages/rate/README.md

1.11.73.0 KB
Original Source

Rate 评分

介绍

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

引入

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

json
"usingComponents": {
  "van-rate": "@vant/weapp/rate/index"
}

代码演示

基础用法

html
<van-rate value="{{ value }}" bind:change="onChange" />
javascript
Page({
  data: {
    value: 3,
  },

  onChange(event) {
    this.setData({
      value: event.detail,
    });
  },
});

自定义图标

html
<van-rate
  value="{{ value }}"
  icon="like"
  void-icon="like-o"
  bind:change="onChange"
/>

自定义样式

html
<van-rate
  value="{{ value }}"
  size="{{ 25 }}"
  color="#ffd21e"
  void-icon="star"
  void-color="#eee"
  bind:change="onChange"
/>

半星

html
<van-rate
  value="{{ value }}"
  allow-half
  void-icon="star"
  void-color="#eee"
  bind:change="onChange"
/>
javascript
Page({
  data: {
    value: 2.5,
  },

  onChange(event) {
    this.setData({
      value: event.detail,
    });
  },
});

自定义数量

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

禁用状态

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

只读状态

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

监听 change 事件

评分变化时,会触发 change 事件。

html
<van-rate value="{{ value }}" bind:change="onChange" />
javascript
Page({
  data: {
    value: 2,
  },

  onChange(event) {
    Toast('当前值:' + event.detail);
  },
});

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

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

外部样式类

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