vue封装星星组件

效果图：

<template>
  <div>
    <div class="star mb-10" :class="starType">
      <span
        class="star-item"
        v-for="itemClass in itemClassess"
        :class="itemClass"
        track-by="$index"
      ></span>
    </div>
  </div>
</template>

<script>
const LENGTH = 5; //星星个数
const CLS_ON = "on"; //满星状态
const CLS_HALF = "half"; //半星状态
const CLS_OFF = "off"; //无星状态

export default {
  name: "xx",
  props: {
    size: {
      type: Number //  星星大小
    },
    score: {
      type: Number //  星星分数
    }
  },
  computed: {
    starType() {
      //设置星星尺寸
      return "star-" + this.size;
    },
    itemClassess() {
      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);
      }
      //无星
      if (result.length < LENGTH) {
        result.push(CLS_OFF);
      }
      return result;
    }
  }
};
</script>

<style>
.star {
  display: flex;
  width: 100%;
}
.star-48 .star-item {
  width: 20px;
  height: 20px;
  margin-right: 22px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
}
.star-48 .star-item:last-child {
  margin-right: 0px;
}
.star-48 .star-item.on {
  background-image: url("../../public/mx.png");  //满星图片 
}
.star-48 .star-item.half {
  background-image: url("../../public/bx.png");  //半星图片
}
.star-48 .star-item.off {
  background-image: url("../../public/wx.png");  //无星图片
}

.star-36 .star-item {
  width: 15px;
  height: 15px;
  margin-right: 6px;
  background-repeat: no-repeat;
  background-size: 15px 15px;
}
.star-36 .star-item:last-child {
  margin-right: 0px;
}
.star-36 .star-item:last-child {
  margin-right: 0px;
}
.star-36 .star-item.on {
  background-image: url("../../public/mx.png");  //满星图片 
}
.star-36 .star-item.half {
  background-image: url("../../public/bx.png");  //半星图片
}
.star-36 .star-item.off {
  background-image: url("../../public/wx.png");  //无星图片
}
</style>

在需要的组件中引入

import xx from "@/components/xx";
components: { xx }
<xx :size="48" :score="3"></xx>