星星組件star.vue

整個流程是:

1. 綁定星星類型的class(48,36,24尺寸),使用starType

2. 使用class來顯示星星,有3種類型,全星,半星,無星,使用star-item表明星星自己,而後分別使用on,off,half表明三種不一樣類型的星星

3. 一個span表明一個星星項目,而且使用v-for循環將星星項目輸出

組合出來的星星html就相似這樣

<div class="star star-48">
<span class="star-item on"></span>
<span class="star-item on"></span>
<span class="star-item on"></span>
<span class="star-item on"></span>
<span class="star-item half"></span>
</div>

html部分

<template>
  <div class="star" :class="starType">
    <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item"></span>
  </div>
</template>

js部分

• 設置常量是爲了方便解耦

• 星星計算比較巧妙(根據分數轉換爲星星數)

  • 對於分數score進行2而後向下取整,而後再除以2,是爲了獲取全部星星的數量,而且這個數量是0.5倍數的,例如4.6 2就是9.2,而後向下取整是9,而後再除以2就是4.5,那麼就能夠獲得一個0.5倍數的星星數,能夠轉換爲4個全星+一個半星

  • 對於非整數的星星算做是半個星星,須要知道是否有存在這種狀況,因此分數score%1 ,例如8 % 1是0, 8.5 % 1就不是0,而且這個半星只會出現一次,由於半星狀態就只要一個

  • 沒有星星的部分是要補全的,這裏使用while循環來處理這種狀況

<script>
  //設置常量
  const LENGTH = 5;
  const CLS_ON = 'on';
  const CLS_HALF = 'half';
  const CLS_OFF = 'off';

  export default{
    props: {
      size: { //傳入的size變量
        type: Number //設置變量類型
      },
      score: { //傳入的score變量
        type: Number
      }
    },
    computed: {
      starType(){ //經過計算屬性,返回組裝過的類型,用來對應class類型
        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++) { //整數星星使用on
          result.push(CLS_ON);//一個整數星星就push一個CLS_ON到數組
        }
        if (hasDecimal) { //非整數星星使用half
          result.push(CLS_HALF);//相似
        }
        while (result.length < LENGTH) { //餘下的用無星星補全,使用off
          result.push(CLS_OFF);//相似
        }
        return result;
      }
    }
  }
</script>

css部分

• 引入mixin.styl是爲了使用bg-image的mixin,由於以前作了一個mixin是專門處理2x和3x圖片的轉換

• 由於這裏有3種類型的星星圖片,分別是48尺寸,36尺寸,24尺寸,因此對於每個類別的圖片分別使用一種class作對應

• 每一種星星的尺寸都是有一種相對應的圖片的,例如48尺寸的星星就會有,而且圖片放在相對應的vue文件目錄下

  star48_half@2x.png
  star48_half@3x.png
  star48_off@2x.png
  star48_off@3x.png
  star48_on@2x.png
  star48_on@3x.png

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl" //引入mixin文件

  .star
    .star-item
      display: inline-block
      background-repeat: no-repeat
    &.star-48 //48尺寸的星星
      .star-item //每個星星的基本css信息
        width: 20px
        height: 20px
        margin-right: 22px //每個星星dom都有外邊距
        background-size: 20px 20px
        &:last-child //最後一個的外邊距就是0
          margin-right: 0
        &.on //全星狀態的class
          bg-image('star48_on')
        &.half //半星狀態的class
          bg-image('star48_half')
        &.off //無星狀態的class
          bg-image('star48_off')
    &.star-36
      .star-item
        width: 15px
        height: 15px
        margin-right: 6px
        background-size: 15px 15px
      &:last-child
        margin-right: 0
      &.on
        bg-image('star36_on')
      &.half
        bg-image('star36_half')
      &.off
        bg-image('star36_off')
    &.star-24
      .star-item
        width: 10px
        height: 10px
        margin-right: 3px
        background-size: 10px 10px
      &:last-child
        margin-right: 0
      &.on
        bg-image('star24_on')
      &.half
        bg-image('star24_half')
      &.off
        bg-image('star24_off')
</style>