🌏 Translated with the assistance of DeepSeek and ChatGPT
Rate
It seems like everyone likes to rate with stars.
Basic Usage
The Rate component enters controlled mode when the modelValue is passed. If modelValue is not passed or is undefined, it is in uncontrolled mode, in which case a defaultValue can be provided as the initial value.
Hide source code
Half Stars
The allowHalf prop controls whether half-star selections are allowed.
Hide source code
Readonly and Disabled
Hide source code
Clearable
When clearable is set to true, clicking on the position corresponding to the current value will clear the Rate value and set it to 0.
Hide source code
Custom Color
activeColor sets the color when the star is active.
Hide source code
API
RateProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| modelValue | number | null | True | | The value of the Rate component (controlled mode). | 0.2.0 |
| defaultValue | number | null | True | | The default value of the Rate component (uncontrolled mode). | 0.2.0 |
| disabled | boolean | True | false | Whether the component is disabled. | 0.2.0 |
| readonly | boolean | True | false | Whether the component is read-only. | 0.2.0 |
| clearable | boolean | True | false | Whether the value can be cleared. | 0.2.0 |
| count | number | True | 5 | The number of selectable icons. | 0.2.0 |
| allowHalf | boolean | True | false | Whether half-star selection is allowed. | 0.2.0 |
| activeColor | string | True | '#FFCC33' | The color when active. See Supported Color Parsing. | 0.2.0 |
| pollSizeChange | boolean | True | false | Enables polling for component size changes. This may impact performance. | 0.2.0 |
RateEvents
| Event | Parameter | Description | Version |
|---|---|---|---|
| update:modelValue | value: number | Callback fired when modelValue needs to be updated. | 0.2.0 |
| change | value: number, event: Event | Callback fired when the rating value changes. | 0.2.0 |
| select | value: number, event: MouseEvent | Callback fired when a rating icon is selected. | 0.2.0 |
| clear | value: number, event: MouseEvent | Callback fired when the rating is cleared. | 0.2.0 |
| focus | event: FocusEvent | Callback fired when the component receives focus. | 0.2.0 |
| blur | event: FocusEvent | Callback fired when the component loses focus. | 0.2.0 |