vant/src/rate

Rate

Install

import Vue from 'vue';
import { Rate } from 'vant';

Vue.use(Rate);

Usage

Basic Usage

<van-rate v-model="value" />

export default {
  data() {
    return {
      value: 3,
    };
  },
};

Custom Icon

<van-rate v-model="value" icon="like" void-icon="like-o" />

Custom Style

<van-rate
  v-model="value"
  :size="25"
  color="#ffd21e"
  void-icon="star"
  void-color="#eee"
/>

Half Star

<van-rate v-model="value" allow-half void-icon="star" void-color="#eee" />

export default {
  data() {
    return {
      value: 2.5,
    };
  },
};

Custom Count

<van-rate v-model="value" :count="6" />

Disabled

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

Readonly

<van-rate v-model="value" readonly />

Change Event

<van-rate v-model="value" @change="onChange" />

export default {
  method: {
    onChange(value) {
      Toast('current value:' + value);
    },
  },
};

API

Props

Attribute	Description	Type	Default
v-model	Current rate	number	-
count	Count	number | string	5
size	Icon size	number | string	20px
gutter	Icon gutter	number | string	4px
color	Selected color	string	#ee0a24
void-color	Void color	string	#c8c9cc
disabled-color	Disabled color	string	#c8c9cc
icon	Selected icon	string	star
void-icon	Void icon	string	star-o
icon-prefix v2.5.3	Icon className prefix	string	van-icon
allow-half	Whether to allow half star	boolean	false
readonly	Whether to be readonly	boolean	false
disabled	Whether to disable rate	boolean	false
touchable	Whether to allow select rate by touch gesture	boolean	true

Events

Event	Description	Parameters
change	Emitted when rate changed	current rate

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@rate-icon-size	20px	-
@rate-icon-gutter	@padding-base	-
@rate-icon-void-color	@gray-5	-
@rate-icon-full-color	@red	-
@rate-icon-disabled-color	@gray-5	-