Vue_实现五星好评效果
一、前言
我们在做美团之类的app的时候,很多时候要显示五星好评,下面就用vue来实现这个将数字用图形显示的效果
二、主要内容
1、将五星写在一个复用组件里面(因为在很多地方都会用到)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
三、总结
虽然现在走得很慢,但不会一直这么慢