Rate - Vant 4

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

import { ref } from'vue'; exportdefault { setup() { const value = ref(3); return { value }; }, };

Custom Icon

Custom Style

Half Star

import { ref } from'vue'; exportdefault { setup() { const value = ref(2.5); return { value }; }, };

Custom Count

Clearable

When the clearable prop is set to true, clicking on the same value again will reset the value to 0.

Disabled

Readonly

Readonly Half Star

import { ref } from'vue'; exportdefault { setup() { const value = ref(3.3); return { value }; }, };

Change Event

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const value = ref(3); constonChange = (value) => showToast('current value:' + value); return { value, onChange, }; }, };

API

Props

Attribute	Description	Type	Default
v-model	Current rate	number	-
count	Count	*number	string*
size	Icon size	*number	string*
gutter	Icon gutter	*number	string*
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 | | clearable v4.6.0 | Whether to allow clear when click again | 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	currentValue: number

Types

The component exports the following type definitions:

importtype { RateProps } from'vant';

Theming

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-gray-5)	-
--van-rate-icon-full-color	var(--van-danger-color)	-
--van-rate-icon-disabled-color	var(--van-gray-5)	-