Vue模仿饿了么中的星星评价

饿了么每个商家都有一个评分，例如4.5，我们先想一下逻辑，例如3.5以下的就显示3星，3.5以上的就显示3个半，也就是.5以下的就直接不要了，.5以上的就显示半星

computed:{
		scoreList(){
			let result=[];
			// 这步的做法就是判断传过来的数字是不是大于4.5的,如果大于4.5就保留小数,否则就是整数
			let scores=Math.floor(this.score*2)/2;
			
			let hasScore=scores%1!==0;//判断是否小数
			//先判断有多少个一星
			console.log(hasScore)
			let integer=Math.floor(scores);
			//在数组中存入一星类名
			for(let i=0;i<integer;i++){
				result.push(cls_on);
			}
			//如果是小数 就放一个半星进去
			if(hasScore){
				result.push(cls_half)
			}
			//如果result的长度小于了5，那么剩下的就是灰色的星星
			while(result.length<length){
				result.push(cls_off)
			}
			return result;
		},
		starSize(){
			return 'star-'+this.size;
		}
	}

最核心的就是Math.floor(this.score*2)/2，例如如果是2.3，那么就是2.3*2=4.6 经过Math.floor函数后就是4然后在除以2就是2个星星

如果是2.6，就是2.6*2=5.2 经过舍去小数后就是5,然后5除以2就是2.5，那么就需要显示半个星星

那么以上就得除了.5以下的就是2个星星，.5以上的就是带有小数的

其次就是判断是否有小数了， hasScore=scores%1!==0;

let integer=Math.floor(scores);
			//在数组中存入一星类名
for(let i=0;i<integer;i++){
	result.push(cls_on);
}

以上 代码是得出有多少个一星，然后push到数组中，就是把一星的类名push进去

//如果是小数 就放一个半星进去
			if(hasScore){
				result.push(cls_half)
			}
			//如果result的长度小于了5，那么剩下的就是灰色的星星
			while(result.length<length){
				result.push(cls_off)
			}
			return result;

这段 代码先判断下是否有半星，之前我们已经知道如果带有小数的就是半星，然后push半星的类名进去

while循环部分，result是我们push星星的类名，如果result的长度小于了5，那么剩下的就是灰色的星星，push灰色星星的类名。

以下是完整的代码：

<template>
<div :class="starSize">
<span v-for="item in scoreList" :class="item"></span>
</div>
</template>

<script>
const length=5;//控制数组的长度
const cls_on="on";//一星的类名
const cls_half="half";//半星的类名
const cls_off="off";//无星的类名
export default{
name:'star',
data(){
return {

}
},
props:{
score:{
type:Number
},
size:{
type:Number
}
},
mounted(){
console.log(this._props)
},
computed:{
scoreList(){
let result=[];
// 这步的做法就是判断传过来的数字是不是大于4.5的,如果大于4.5就保留小数,否则就是整数
let scores=Math.floor(this.score*2)/2;

let hasScore=scores%1!==0;//判断是否小数
//先判断有多少个一星
console.log(hasScore)
let integer=Math.floor(scores);
//在数组中存入一星类名
for(let i=0;i<integer;i++){
result.push(cls_on);
}
//如果是小数 就放一个半星进去
if(hasScore){
result.push(cls_half)
}
//如果result的长度小于了5，那么剩下的就是灰色的星星
while(result.length<length){
result.push(cls_off)
}
return result;
},
starSize(){
return 'star-'+this.size;
}
}
}
</script>

<style>
@import "../../common/css/base.less";
.star_item{
display: inline-block;
background-repeat: no-repeat;
}
.star-48{
.star_item{
width: 20px;
height: 20px;
margin-right: 22px;
background-size: 20px 20px;
&.on{
.bg-img('../../assets/images/star48_on');
}
&.half{
.bg-img('../../assets/images/star48_half');
}
&.off{
.bg-img('../../assets/images/star48_off');
}
}
}
.star-36{
.star_item{
width: 15px;
height: 15px;
margin-right: 6px;
background-size: 15px 15px;
&.on{
.bg-img('../../assets/images/star36_on');
}
&.half{
.bg-img('../../assets/images/star36_half');
}
&.off{
.bg-img('../../assets/images/star36_off');
}
}
}
.star-24{
.star_item{
width: 10px;
height: 10px;
margin-right: 6px;
background-size: 10px 10px;
&.on{
.bg-img('../../assets/images/star24_on');
}
&.half{
.bg-img('../../assets/images/star24_half');
}
&.off{
.bg-img('../../assets/images/star24_off');
}
}
}
</style>