1. 首先,评分允许评半颗星,使用 allow-half
<template>
<Rate allow-half v-model="valueHalf" />
</template>
<script>
export default {
data () {
return {
valueHalf: 2.5
}
}
}
</script>
2. 评分右边显示文本,比如5星等, show-text ,在Rate中使用 slot 自定义或新增span,可以自定义显示的文本
<template> <Row> <Col span="12"> <Rate show-text v-model="valueText" /> </Col> <Col span="12"> <Rate show-text allow-half v-model="valueCustomText"> <span style="color: #f5a623">{{ valueCustomText }}</span> </Rate> </Col> </Row> </template> <script> export default { data () { return { valueText: 3, valueCustomText: 3.8 } } } </script>
3. 评分结果只读,disabled
<template>
<Rate disabled v-model="valueDisabled" />
</template>
<script>
export default {
data () {
return {
valueDisabled: 2
}
}
}
</script>
4. 点击可清除评分组件,或点击不可清除评分组件 clearable ,不加该参数则不可清除
<template>
<Rate clearable v-model="value1" />
</template>
<script>
export default {
data () {
return {
value1: 3
}
}
}
</script>
后续补充