vue中的星星评分前台

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/star48_on@2x.png)
        &.half
          background-image :url(../views/star48_half@2x.png)
        &.off
          background-image :url(../views/star48_off@2x.png)

</style>