vue 实现的评分小星星组件，包括半星

Posted 2020-12-29 chun321

github源码地址：https://github.com/13476075014/node-vue/blob/master/mynodeproject/13.sell/sell/src/components/star/star.vue

 

一：实现的思路：

　　通过评分的分数，来算出高亮的全星有几颗，有没有半星，灰色星星有几颗，通过背景图片实现，例如：

　　　　评分 ： 4.6 分 

　　　　四舍五入计算把分数换算成0.5的倍数：Math.floor( 4.6 *2 ) / 2   等于 4.5

　　　　把星星放到数组 arr_star 里面：

　　　　　　是否需要半星  var half = 4.5 % 1 != 0 ?  true :false    //能被1取余整数的话就不需要半星为false,否则是true

　　　　　　把全星push到数组里面   for ( var i = 0; i< Math.floor( 4.5) ;i++ ) {  arr_star.push( "on")  }  //on是星星高亮的图片名字

　　　　　　把半星放到数组里面  if( half ) { arr_star.push( "half" ) }  //half是半星图片的名字

　　　　　　把灰色星星放到数组里面  if( arr_star.length < 5) { 

　　　　　　　　　　　　　　　　　　　　for( var i=0;i<(5-arr_star.length) ; i++ ){  arr_star.push( "off" ) }   //off是灰色星星的名字

二：具体实现代码：

　　2.1 html部分：

　　　　

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

　　2.2 js部分

<script>
const lengths = 5;
const starOn = ‘on‘;
const starHalf = ‘half‘;
const starOff = ‘off‘;

  export default({
    data(){
      return {

      }
    },
    props:{
      score:{//分数
        type:Number,
        default:function(){
          return 5
        }
      }
    },
    created() {
    },
    computed:{
      itemClasslass(){//星星的数组
          let result = [];
          let score = Math.floor(this.score * 2) / 2; //例如：把分数处理成在4.5以上及4.5就变成向上取整5，在4.5以下就变成4.5


          //是否需要半星
          let starhalf = score%1 != 0 ? true : false ;

          //几颗全星
          let fullstar = Math.floor(score);
          for(var i=0 ; i<fullstar;i++){//放全星
            result.push(starOn);
          }
          if(starhalf){//放半星
            result.push(starHalf)
          }
          if(result.length < lengths){//如果没有满到五个星就用灰色的星星补齐9
            var offstar = lengths - result.length;
            for(var i=0;i<offstar;i++){
                result.push(starOff);
            }
          };
          return result;
      }
    }
  })
</script>

　　2.3 css部分

<style lang="stylus" scoped>
// @import "../../common/stylus/mixin";

  .star
    .star-item
      display inline-block
      background-repeat no-repeat
      width 20px
      height 20px
      margin-right 22px
      background-size 20px 20px
      &:last-child
        margin-right 0
      &.on
        bg-image(on‘)  /* 这个是在公用的stylus中的方法：

　　　　　　　　　　　　　　　　bg-image($url)

　　　　　　　　　　　　　　　　　　background-image url("../../assets/images/" + $url + "@2x.png")

　　　　　　　　　　　　　　*/
      &.half
        bg-image(‘half‘)
      &.off
        bg-image(‘off‘)  


</style>

三：具体效果：