/*! For license information please see 6865.db988c82.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["6865"],{78365:function(s,n,a){"use strict";a.r(n);var t=a("80681");let e=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Rate

\n

Intro

\n

The rate component is used for rating things.

\n

Install

\n

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

\n
import { createApp } from 'vue';\nimport { Rate } from 'vant';\n\nconst app = createApp();\napp.use(Rate);\n
\n

Usage

\n

Basic Usage

\n
<van-rate v-model="value" />\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref(3);\n    return { value };\n  },\n};\n
\n

Custom Icon

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

Custom Style

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

Half Star

\n
<van-rate v-model="value" allow-half />\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref(2.5);\n    return { value };\n  },\n};\n
\n

Custom Count

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

Clearable

\n

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

\n
<van-rate v-model="value" clearable />\n
\n

Disabled

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

Readonly

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

Readonly Half Star

\n
<van-rate v-model="value" readonly />\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref(3.3);\n    return { value };\n  },\n};\n
\n

Change Event

\n
<van-rate v-model="value" @change="onChange" />\n
\n
import { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const value = ref(3);\n    const onChange = (value) => showToast('current value:' + value);\n    return {\n      value,\n      onChange,\n    };\n  },\n};\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
v-modelCurrent ratenumber-
countCountnumber | string5
sizeIcon sizenumber | string20px
gutterIcon gutternumber | string4px
colorSelected colorstring#ee0a24
void-colorVoid colorstring#c8c9cc
disabled-colorDisabled colorstring#c8c9cc
iconSelected iconstringstar
void-iconVoid iconstringstar-o
icon-prefixIcon className prefixstringvan-icon
allow-halfWhether to allow half starbooleanfalse
clearable v4.6.0Whether to allow clear when click againbooleanfalse
readonlyWhether to be readonlybooleanfalse
disabledWhether to disable ratebooleanfalse
touchableWhether to allow select rate by touch gesturebooleantrue
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionParameters
changeEmitted when rate changedcurrentValue: number
\n

Types

\n

The component exports the following type definitions:

\n
import type { RateProps } from 'vant';\n
\n

Theming

\n

CSS Variables

\n

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-rate-icon-size20px-
--van-rate-icon-guttervar(--van-padding-base)-
--van-rate-icon-void-colorvar(--van-gray-5)-
--van-rate-icon-full-colorvar(--van-danger-color)-
--van-rate-icon-disabled-colorvar(--van-gray-5)-
\n
'},null,8,e))}}}]);