Vant Rate rating

May 07, 2021 Vant

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

Vue.use(Rate);

Code demo

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

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

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

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

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

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

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

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

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

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

export default {
  method: {
    onChange(value) {
      Toast('当前值：'+ value);
    }
  }
}

Parameters	Description	Type	The default
v-model	The current score	number	-
count	The total number of icons	number \| string	`5`
size	Icon size, the default unit `px`	number \| string	`20px`
gutter	Icon spacing, the default unit `px`	number \| string	`4px`
color	The color when selected	string	`#ffd21e`
void-color	The color when not selected	string	`#c8c9cc`
disabled-color	The color when disabled	string	`#bdbdbd`
icon	When selected, the icon name or picture link	string	`star`
void-icon	Icon name or picture link when unchecked	string	`star-o`
allow-half	Whether to allow half-select	boolean	`false`
readonly	Is it a readable state?	boolean	`false`
disabled	Whether to disable scoring	boolean	`false`
touchable `v2.2.0`	Whether you can select a rating by swiping a gesture	boolean	`true`

The name of the event	Description	Callback parameters
change	The event that is triggered when the current score changes	The current score