IVIEW 评分组件 Rate 介绍

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>

　　

 

后续补充