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

Posted chun321

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 实现的评分小星星组件,包括半星相关的知识,希望对你有一定的参考价值。

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>

三:具体效果:

  技术分享图片

以上是关于vue 实现的评分小星星组件,包括半星的主要内容,如果未能解决你的问题,请参考以下文章

Vue实现Rate组件(星星评分)

Vue实现Rate组件(星星评分)

Full-featured Vue 评分组件

js实现星级评分效果(最短代码)

如果您在星级评分中使用 bootstrap 5 图标,则存在半星问题

星星评分vue.js+onsen