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>
Star.vue
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>
三、总结
标签：五星,Vue,const,image,好评,bg,CLASS,&.,size 来源： https://www.cnblogs.com/xxm980617/p/10817801.html