1:组件要能实现,这个五角星不同大小,评分也不一样,比如满分五颗星,四颗半星,四颗星等等…
所以需要像组件传入一个大小:size,一个分数:score
2:代码如下:
<template>
<div class="about">
<div class="star" :class="starType">
<span v-for="(item,index) in itemClsses" class="star-item" :class="item" :key="index"></span>
</div>
</div>
</template>
<script>
const LENGHT = 5;
const CLS_ON = "on";
const CLS_OFF = "off";
const CLS_HALF = "half";
export default {
data(){
return{
size: 48,
score: 1.5
}
},
computed:{
starType(){
return "star-"+this.size;
},
itemClsses(){
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<LENGHT){
result.push(CLS_OFF);
}
return result;
}
}
}
</script>
<style lang="stylus" scoped>
.star
font-size: 0
.star-item
display :inline-block
background-repeat :no-repeat
&.star-48
.star-item
width: 20px
height :20px
margin-right :22px
background-size :20px 20px
&:last-child
margiin-right: 0
&.on
background-image :url(../views/[email protected])
&.half
background-image :url(../views/[email protected])
&.off
background-image :url(../views/[email protected])
</style>