Rating
Examples
Editable
Users can set the rating interactively.
<template>
<article>
<veui-rating v-model="value"/>
</article>
</template>
<script>
import { Rating } from 'veui'
export default {
components: {
'veui-rating': Rating
},
data () {
return {
value: 4
}
}
}
</script>
Read-only
Set the readonly prop to true to display an existing rating.
<template>
<article>
<veui-rating
v-model="value"
readonly
/>
</article>
</template>
<script>
import { Rating } from 'veui'
export default {
components: {
'veui-rating': Rating
},
data () {
return {
value: 4
}
}
}
</script>
Max rating
Set the value of the max prop to specify the maximum number of rating symbols to display.
<template>
<article>
<veui-rating
v-model="value"
:max="3"
/>
</article>
</template>
<script>
import { Rating } from 'veui'
export default {
components: {
'veui-rating': Rating
},
data () {
return {
value: 2
}
}
}
</script>
Clearable
Set the clearable prop to true to allow users to clear the selected rating by clicking on it.
<template>
<article>
<veui-rating
v-model="value"
clearable
/>
</article>
</template>
<script>
import { Rating } from 'veui'
export default {
components: {
'veui-rating': Rating
},
data () {
return {
value: 4
}
}
}
</script>
Labels
Set the value of the labels prop to specify the description text for each rating symbol. The label-position prop can be used to specify whether the description text is displayed inline or as a tooltip.
label-position="inline" (default)
label-position="popup"
<template>
<article>
<section>
<h4><code>label-position="inline"</code> (default)</h4>
<veui-rating
v-model="value"
:labels="labels"
/>
</section>
<section>
<h4><code>label-position="popup"</code></h4>
<veui-rating
v-model="value"
:labels="labels"
label-position="popup"
/>
</section>
</article>
</template>
<script>
import { Rating } from 'veui'
export default {
components: {
'veui-rating': Rating
},
data () {
return {
value: 4,
labels: {
1: '非常不满意',
2: '不满意',
3: '一般',
4: '满意',
5: '非常满意'
}
}
}
}
</script>
Half-star
Set the allow-half prop to true to allow half-star ratings.
<template>
<article>
<veui-rating
v-model="value"
allow-half
/>
</article>
</template>
<script>
import { Rating } from 'veui'
export default {
components: {
'veui-rating': Rating
},
data () {
return {
value: 4
}
}
}
</script>
Custom symbols
Use the symbol slot to customize the symbol of each rating item.
<template>
<article>
<veui-rating v-model="value">
<template #symbol>
赞
</template>
</veui-rating>
</article>
</template>
<script>
import { Rating } from 'veui'
export default {
components: {
'veui-rating': Rating
},
data () {
return {
value: 4
}
}
}
</script>
API
Props
| Name | Type | Default | Description |
|---|---|---|---|
max | number | 5 | The maximum number of rating items to display. Must be an integer. |
value | number | - |
The selected rating score, ranging from |
readonly | boolean | false | Whether the rating is in read-only mode. |
clearable | boolean | false | Whether to allow clearing the selected rating. |
allow-half | boolean | false | Whether to allow half-star ratings. |
labels | Record<number, string> | - | The description text for each rating symbol. |
label-position | 'inline' | 'popup' | 'inline' | The display mode of the description text. Use 'inline' for inline display and 'popup' for tooltip display. |
Slots
| Name | Description | ||||||
|---|---|---|---|---|---|---|---|
symbol | The symbol area of each rating item. Default content: Display star symbols.
| ||||||
label | The label area of each rating item. Default content: The description text specified for each rating in
|
Events
| Name | Description |
|---|---|
change |
Fired when the rating state changes. The callback parameter is |
Custom Styles
| Name | Type | Default | Description |
|---|---|---|---|
--dls-rating-symbol-gap | <length> | - | The spacing between rating items. |
--dls-rating-label-spacing | <length> | - | The spacing between the description text and the rating items. |