vue实现五星评价方法

1、需求：

根据用户评分来判断星星被点亮多少颗。保留小数，大于等于零点五，则多显示半颗星，否则只显示整数值。如：

3.3分只显示3颗星；3.6分，则显示3颗完整的星星，加上一个被点亮了一半的信息。

2、准备工作

准备3张img，分别是全部被点亮的、只点亮一半的、未点亮的

 

3、分析实现思路

这里假设用户评分为4.7分，那么根据需求，就是显示4个完整的被点亮的星星，一个被点亮一半的星星。

我们可以定义一个数组，里面存放4个完整的星星的样式，1个点亮一半的星星的样式。然后通过v-for循环遍历。

<div class="star">
   <span class="star-item" v-for="(itemClass, index) in itemClass" :key="index" :class="itemClass"></span>
</div>

// 星星总长度
const LENGTH = 5;

// 星星的状态
const CLS_ON = "on";        // 全星
const CLS_HALF = "half";    // 半星
const CLS_OFF = "off";      // 剩余未点亮的星星

export default {
    name: 'star',
    data () {
        return {
            score: 4.7
        }
    },
    computed: {
        itemClass() {
            let result = [];
            let score = Math.floor(this.score * 2) / 2;
            let hasDecimal = score % 1 !== 0;
            let integer = Math.floor(score);

            for(let i = 0; i < integer; i++) {
                result.push(CLS_ON);
            }

            // 是否有半个星星
            if(hasDecimal) {
                result.push(CLS_HALF);
            }

            // 补齐
            while(result.length < LENGTH) {
                result.push(CLS_OFF);
            }
            return result
        }
    },

}

.star .star-item{
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 3px;
    background-repeat: no-repeat;
    background-size: 10px 10px;
}

/* 三种图片类型*/
.star .on{
    background-image: url(img/star24_on@2x.png);
}
.star .half{
    background-image: url(img/star24_half@2x.png);
}
.star .off{
    background-image: url(img/star24_off@2x.png);
}