mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-10-26 17:22:11 +08:00
1.6 KiB
1.6 KiB
Rate
Install
import { Rate } from 'vant';
Vue.use(Rate);
Usage
Basic Usage
<van-rate v-model="value" />
export default {
data() {
return {
value: 3
};
}
}
Custom Icon
<van-rate
v-model="value"
icon="like"
void-icon="like-o"
/>
Custom Style
<van-rate
v-model="value"
:size="25"
color="#f44"
void-icon="star"
void-color="#eee"
/>
Half Star
<van-rate
v-model="value"
allow-half
void-icon="star"
void-color="#eee"
/>
export default {
data() {
return {
value: 2.5
};
}
}
Custom Count
<van-rate v-model="value" :count="6" />
Disabled
<van-rate v-model="value" disabled />
Readonly
<van-rate v-model="value" readonly />
API
| Attribute | Description | Type | Default |
|---|---|---|---|
| v-model | Current rate | Number |
- |
| count | Count | Number |
5 |
| size | Icon size (px) | Number |
20 |
| color | Selected color | String |
#ffd21e |
| void-color | Void color | String |
#c7c7c7 |
| icon | Selected icon | String |
star |
| void-icon | Void icon | String |
star-o |
| allow-half | Whether to allow half star | Boolean |
false |
| readonly | Whether to be readonly | Boolean |
false |
| disabled | Whether to disable rate | Boolean |
false |
| disabled-color | Disabled color | String |
#bdbdbd |
Event
| Event | Description | Parameters |
|---|---|---|
| change | Triggered when rate changed | current rate |