目前因为没做过电商的,所以看到电商的几星评价,自己也来试一把,这里用的vue,主要是想给这小算法做个笔记
首先template:
<template>
<div class="star">
<span class="star-item" v-for="(item,index) in classes" :class="item" :key="index"></span>
</div>
</template>
然后js:
<script>
const LENGTH = 5; //最多五星
const CLS_ON = "on"; //满星
const CLS_HALF = "half"; //半星
const CLS_OFF = "off"; //空星
export default {
data() {
return {
score: 4.8//这个暂且不管从哪里来
};
},
computed: {
classes() {
let result = [];
let score = Math.floor(this.score * 2) / 2; //处理小数,小于5的舍去,大于等于5的等于5,用作半星
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); //如果没到5个,就补充空星
}
return result;
}
}
};
</script>
然后style:
<style scoped>
.star-item{
display: inline-block;
width: 12px;
height: 12px;
}
.on{
background: url('on.png') no-repeat;
}
.off{
background: url('off.png') no-repeat;
}
.half{
background: url('half.png') no-repeat;
}
</style>
这样就出来了(上面设的4.8,所以只有4星半)
最后补充一句:当然,可能有小伙伴会说这样不准确,小于0.5的就没有,大于0.5的小数就只有半星,其实开头也说了,这不是重点,只是一个小白看到点新鲜玩意就想记下来,我也看了下现在别人的评价,很多都是做的两层,底层空星,上面一层用的颜色盖住,上面一层的宽度用百分比去确定,这样就不会只有半星的情况了。