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>

三、总结