星星评价技巧

目前因为没做过电商的，所以看到电商的几星评价，自己也来试一把，这里用的vue,主要是想给这小算法做个笔记
首先template：

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

然后js：

<script>
const LENGTH = 5; //最多五星
const CLS_ON = "on"; //满星
const CLS_HALF = "half"; //半星
const CLS_OFF = "off"; //空星

export default {
  data() {
    return {
      score: 4.8//这个暂且不管从哪里来
    };
  },
  computed: {
    classes() {
      let result = [];
      let score = Math.floor(this.score * 2) / 2; //处理小数，小于5的舍去，大于等于5的等于5，用作半星
      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); //如果没到5个，就补充空星
      }
      return result;
    }
  }
};
</script>

然后style：

<style scoped>
.star-item{
  display: inline-block;
  width: 12px;
  height: 12px;
}
.on{
  background: url('on.png') no-repeat;
}
.off{
  background: url('off.png') no-repeat;
}
.half{
  background: url('half.png') no-repeat;
}
</style>

这样就出来了（上面设的4.8，所以只有4星半）

最后补充一句：当然，可能有小伙伴会说这样不准确，小于0.5的就没有，大于0.5的小数就只有半星，其实开头也说了，这不是重点，只是一个小白看到点新鲜玩意就想记下来，我也看了下现在别人的评价，很多都是做的两层，底层空星，上面一层用的颜色盖住，上面一层的宽度用百分比去确定，这样就不会只有半星的情况了。