vant/src/rate/README.md

Rate

Intro

The rate component is used for rating things.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

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

const app = createApp();
app.use(Rate);

Usage

Basic Usage

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

import { ref } from 'vue';

export default {
  setup() {
    const value = ref(3);
    return { value };
  },
};

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 />

import { ref } from 'vue';

export default {
  setup() {
    const value = ref(2.5);
    return { value };
  },
};

Custom Count

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

Disabled

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

Readonly

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

Readonly Half Star

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

import { ref } from 'vue';

export default {
  setup() {
    const value = ref(3.3);
    return { value };
  },
};

Change Event

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

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  setup() {
    const value = ref(3);
    const onChange = (value) => Toast('current value:' + value);
    return {
      value,
      onChange,
    };
  },
};

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	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

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-rate-icon-size	20px	-
--van-rate-icon-gutter	var(--van-padding-base)	-
--van-rate-icon-void-color	var(--van-gary-5)	-
--van-rate-icon-full-color	var(--van-danger-color)	-
--van-rate-icon-disabled-color	var(--van-gary-5)	-