Vue版本评分组件

实现思路：使用实心星以绝对定位的方式覆盖在空心星的上面，利用.high-light的em动态宽度，配合使用overflow：hidden样式即可。

<template>
  <div class="rate primary-color">
    <div class="no-high-light">☆☆☆☆☆</div>
    <div class="high-light" :style="{width: highLightWidth}">★★★★★</div>
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        type: [Number, String],
        default: 0,
      },
    },
    computed: {
      highLightWidth () {
        return `${(this.value / 2).toFixed(1)}em`;
      }
    },
  }
</script>

<style lang="less" scoped>
.rate {
  position: relative;
  .high-light {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    overflow: hidden;
  }
}
</style>