星星评论组件

image.png

<star :size="48" :score="seller.score"></star>

<template>
  <div class="star" :class="starType">
        <span v-for=" (itemClass,index) in  itemClasses " :class="itemClass" class="star-item"  :key="index" ></span>
  </div>
</template>

<script>
  const LENGTH = 5;
  const CLS_ON = 'on';//全星
  const CLS_HALF = 'half';//半星
  const CLS_OFF = 'off';//灰星

export default {
  name: 'star',
  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 = 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);
        }
        return result;//返回一个新的数组
      }
    }
    ,
  watch:{
        'size'(to,form){
        console.log(this.size)
    },
        'score'(to,form){
        console.log(this.score)
    }
  }

}
</script>

<!--<style>
    div{text-align: center;}
</style>-->
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less"  scoped>
       @import "../../common/stylus/border.css";
       @import "../../common/stylus/url.less";
       @import "../../common/stylus/icon.less";
       .star{
        font-size: 0;
        text-align: center;
        .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{margin-right: 0;}
             &.on{background-image: url(img/star48_on@2x.png);}
             &.half{background-image: url(img/star48_half@2x.png);}
             &.off{background-image: url(img/star48_off@2x.png);}
            }
        }
        &.star-36{
            .star-item{
                width: 15px;
                height: 15px;
                margin-right: 6px;
                background-size: 15px 15px;
             &:last-child{margin-right: 0;}
             &.on{background-image: url(img/star36_on@2x.png);}
             &.half{background-image: url(img/star36_half@2x.png);}
             &.off{background-image: url(img/star36_off@2x.png);}
            }
        }
        &.star-24{
            .star-item{
                width: 10px;
                height: 10px;
                margin-right: 3px;
                background-size: 10px 10px;
             &:last-child{margin-right: 0;}
             &.on{background-image: url(img/star24_on@2x.png);}
             &.half{background-image: url(img/star24_half@2x.png);}
             &.off{background-image: url(img/star24_off@2x.png);}
            }
        }  
       }
</style>