Rate 评分

概述

对事物进行快速的评级操作，或对评价进行展示。

使用指南

在.vue中引入组件

<script>
    import iRate from 'iview-mpvue/dist/components/rate/rate'
    export default {
        components: {
            'i-rate': iRate
        }
    }
</script>

示例

<i-cell-group>
    <i-cell title="基本用法">
        <i-rate 
          @change="onChange1" 
          :value="starIndex1">
        </i-rate>
    </i-cell>
    <i-cell title="自定义星星个数">
        <i-rate
            @change="onChange5"
            :count="10"
            :value="starIndex5">
        </i-rate>
    </i-cell>
    <i-cell title="自定义星星大小">
        <i-rate 
            @change="onChange2" 
            :value="starIndex2" 
            size="32">
        </i-rate>
    </i-cell>
    <i-cell title="自定义文字说明">
        <i-rate 
            @change="onChange2" 
            :value="starIndex2"
            show-text="星">
        </i-rate>
    </i-cell>
    <i-cell title="手势touch选择星">
        <i-rate 
            @change="onChange3" 
            :value="starIndex3"
            show-text="星">
        </i-rate>
    </i-cell>
    <i-cell title="禁用点击和手势选择星">
        <i-rate 
            :disabled="true"
            :value="starIndex4"
            show-text="星">
        </i-rate>
    </i-cell>
</i-cell-group>

<script>
    export default {
        data() {
            return {
                starIndex1 : 0,
                starIndex2 : 0,
                starIndex3 : 0,
                starIndex4 : 4,
                starIndex5 : 5
            }
        },
        methods: {
            onChange1(e) {
                this.starIndex1 = e.index
            },
            onChange2(e) {
                this.starIndex2 = e.index
            },
            onChange3(e) {
                this.starIndex3 = e.index
            },
            onChange5(e) {
                this.starIndex5 = e.index
            }
        }
}
</script>

API

Rate properties

属性	说明	类型	默认值
i-class	自定义 class 类名	String	-
count	star 总数	Number	5
value	当前 star 数	Number	0
disabled	是否只读，无法进行交互	Boolean	false
size	图标大小，单位 px	String	20
name	隐藏的 input 的 name 值	String	-
show-text	star图标后的文案	String	-

Rate events

事件名	说明	返回值
bind:change	点击评分时触发	{ index }