Rate 评分

使用指南

  1. import { Rate } from 'vant';
  3. Vue.use(Rate);

代码演示

基础用法

  1. <van-rate v-model="value" />
  1. export default {
  2.   data() {
  3.     return {
  4.       value: 3
  5.     };
  6.   }
  7. }

自定义图标

  1. <van-rate
  2.   v-model="value"
  3.   icon="like"
  4.   void-icon="like-o"
  5. />

自定义样式

  1. <van-rate
  2.   v-model="value"
  3.   :size="25"
  4.   :count="6"
  5.   color="#07c160"
  6.   void-color="#ceefe8"
  7. />

禁用状态

  1.  <van-rate v-model="value" disabled />

API

参数说明类型默认值版本
v-model当前分值Number--
count图标总数Number5-
size图标大小 (px)Number20-
color选中时的颜色String#ffd21e-
void-color未选中时的颜色String#c7c7c7-
icon选中时的图标名称或图片链接，可选值见 Icon 组件Stringstar1.4.7
void-icon未选中时的图标名称或图片链接，可选值见 Icon 组件Stringstar-o1.4.7
readonly是否为只读状态Booleanfalse1.3.0
disabled是否禁用评分Booleanfalse-
disabled-color禁用时的颜色String#bdbdbd-

Event

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

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