vue之星级评分组件开发

1、score.vue

<template>
<div class="star" :class="starType">
<span v-for="itemClass in itemClasses" :class="itemClass" class="star-item"></span>
</div>
</template>


<script>
const LENGHT=5;
const CLS_ON='on';
const CLS_HALF='half';
const CLAS_OFF='off';
export default{
props:{
size:{
type:Number
},
score:{
type:Number
}
},
computed:{
starType(){     //根据不同的设计图设置不同的大小
return 'star-'+this.size;
},
itemClasses(){
let result=[];
let score=Math.floor(this.score*2)/2;
let hasDecimal = this.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<LENGHT){  //如果不足五星 灰色星星补全
    result.push(CLAS_OFF);
   }    
   return result;
}
}
}
</script>

<style>
.star{ display: inline-block;}
.star-item{}
.star-16 span{ width: 16px; height: 16px;}
.star-20 span{width: 20px; height: 20px;}
.star-item{ display: inline-block;}
.star-item.on{ background:url(../../../../static/images/mt_star_q.jpg)}
.star-item.half{ background:url(../../../../static/images/mt_star_b.jpg);}
.star-item.off{ background:url(../../../../static/images/mt_star_h.jpg);}

</style>

2、parent.vue 引入score的组件

<score :size="16" :score="shopscore.score"></score>