vue 星星组件

{
seller.score: 4.2
}

import star from ‘components/star/star’;
components: {
star
}
//组件页面

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

<script type="text/ecmascript-6">
    const LENGTH = 5;
    const CLS_ON = 'on';
    const CLS_HALF = 'half';
    const CLS_OFF = 'off';

    export default {
      props: {
        size: {
          type: Number
        },
        score: {
          type: Number
        }
      },
      computed: {
        starType() {
          return 'star-' + this.size;
        },
        itemClasses() {
          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);
          }
          while (result.length < LENGTH) {
            result.push(CLS_OFF);
          }
          return result;
        }
      }
    };
</script>