Vue_實現五星好評效果

一、前言                                                                         

我們在做美團之類的app的時候，很多時候要顯示五星好評，下面就用vue來實現這個將數字用圖形顯示的效果

                       

 

二、主要內容                                                                  

1、將五星寫在一個復用組件里面（因為在很多地方都會用到）

<template>
    <div class="star" :class="'star-'+size">
        <span class="star-item" v-for="(sc, index) in starClassess" :class="sc" :key="index"></span>
    </div>
    
</template>
<script type="text/javascript">
    //這里是類名常量
    const CLASS_ON = 'on'
    const CLASS_HALF = 'half'
    const CLASS_OFF = 'off'
    export default{
        props:{
            //尺寸大小，分數不同星星不同
            score:Number,
            size:Number

        },
        computed:{
            starClassess(){
                const {score} = this
                const scs = []
                //總個數5個
                //全星星on n個CLASS_ON
                const scoreInteger = Math.floor(score);
                for(let i=0; i<scoreInteger; i++){
                    scs.push(CLASS_ON)
                }
                //半星星0/1個CLASS_HALF
                if(score*10-scoreInteger*10>=5){
                    scs.push(CLASS_HALF)
                }
                //無星星 nCLASS_OFF
                while(scs.length<5){
                    scs.push(CLASS_OFF)
                }
                return scs
            }

        }

    }
</script>
<style lang="stylus" type="stylesheet/stylus">

bg-image($url)
    background-image: url($url + "@2x.png")
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
        background-image: url($url + "@3x.png")
                          .star
                            float left
                            font-size 0
                            .star-item
                              display inline-block
                              background-repeat no-repeat
                            &.star-48
                              .star-item
                                width 20px
                                height 20px
                                margin-right 22px
                                background-size 20px 20px
                                &:last-child
                                  margin-right: 0
                                &.on
                                  bg-image('./images/star48_on')
                                &.half
                                  bg-image('./images/star48_half')
                                &.off
                                  bg-image('./images/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('./images/star36_on')
                                &.half
                                  bg-image('./images/star36_half')
                                &.off
                                  bg-image('./images/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('./images/star24_on')
                                &.half
                                  bg-image('./images/star24_half')
                                &.off
                                  bg-image('./images/star24_off')   
</style>

 
        
      

 

2、因為星星的大小和顏色可能不同，用score和size變量

      第一步：在父組件中掛載引入這個復用組件，並將變量score和size傳進來

//3.使用 item.rating是請求到到評分，size是星星的大小，從父組件將這兩個屬性傳過去
 <Star :score="item.rating" :size="24"></Star>
                        <div class="rating_section">
                          {{item.rating}}
                        </div>


//1.導入
import Star from '../Star/Star'

//2.掛載
components:{
            Star
        }

  第二步：子組件接收，並且可使用

props:{
            //尺寸大小，分數不同星星不同
            score:Number,
            size:Number
        },

 

3、實現根據分數不同，顯示不同的好評星星數

（1）分析

//尺寸是由類：star-24來決定的
//這里有五個星，星星全部有顏色，只有一半有顏色，無顏色分別是通過下面三個類來控制的

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

 

（2）可以通過計算屬性，

       //這里是類名常量
    const CLASS_ON = 'on'
    const CLASS_HALF = 'half'
    const CLASS_OFF = 'off'

      /*
       算法：
       4.7   ： 整數部分為4， 所以有4個CLASS_ON  小數部分>0.5 一個 CLASS_HALF
       
       3.2    : 整數部分為3，所以有3個CLASS_ON  小數部分為<0.5 沒有CLASS_HALF
      */
    export default{
        props:{
            //尺寸大小，分數不同星星不同
            score:Number,
            size:Number
        },
        computed:{
            starClassess(){
                const {score} = this
                const scs = [] //定義一個數組，來存放控制五個星星顏色的類
                //總個數5個
                //全星星on n個CLASS_ON
                const scoreInteger = Math.floor(score);
                for(let i=0; i<scoreInteger; i++){
                    scs.push(CLASS_ON)
                }
                //半星星0/1個CLASS_HALF
                if(score*10-scoreInteger*10>=5){
                    scs.push(CLASS_HALF)
                }
                //無星星 nCLASS_OFF
                while(scs.length<5){
                    scs.push(CLASS_OFF)
                }
                return scs
            }

        }

    }

 

(3)v-for遍歷上面的計算屬性

<template>
    <div class="star" :class="'star-'+size">
        <span class="star-item" v-for="(sc, index) in starClassess" :class="sc" :key="index"></span>
    </div>
    
</template>

 

三、總結