Rate 评分

使用指南

在 app.json 或 index.json 中引入组件

  1. "usingComponents": {
  2. "van-rate": "path/to/vant-weapp/dist/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. count="{{ 6 }}"
  5. color="#07c160"
  6. void-color="#ceefe8"
  7. bind:change="onChange"
  8. />

禁用状态

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

API

参数说明类型默认值
name在表单内提交时的标识符String-
value当前分值Number-
count图标总数Number5
size图标大小 (px)Number20
color选中时的颜色String#ffd21e
void-color未选中时的颜色String#c7c7c7
icon选中时的图标名称或图片链接,可选值见 Icon 组件Stringstar
void-icon未选中时的图标名称或图片链接,可选值见 Icon 组件Stringstar-o
readonly是否为只读状态Booleanfalse
disabled是否禁用评分Booleanfalse
disabled-color禁用时的颜色String#bdbdbd

Event

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

外部样式类

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

更新日志

版本类型内容
0.4.7feature新增组件
0.4.9feature增加 icon-class 外部样式类

原文: https://youzan.github.io/vant-weapp/#/rate