// 定义星星的最大长度
const LENGHT = 5
// 星星对应的class
const CLS_ON = 'fa-star'
const CLS_HALF = 'fa-star-half-empty'
// 填充
const CLS_OFF = 'fa-star-o'
//4.8 四个全星 一个半星
// 装星星
let result = []
// 对分数进行处理,向下取0.5倍数 4.8=>4 ----> 4.8*2=9.6=>9 /2 =>4.5 四个全星 一个半星
let score = Math.floor(this.ratingData * 2) / 2
//控制半星 小数对1取余的话 会有小数点
let hasDecimal = score % 1 !== 0
// 控制全星
let interger = Math.floor(score)
// 放入数组
for (let i = 0; i < interger; i++) {
// 全星
result.push(CLS_ON)
}
if (hasDecimal) {
// 半星
result.push(CLS_HALF)
}
while (result.length < LENGHT) {
// 补齐
result.push(CLS_OFF)
}
而后,再去遍历数组,根据数组的类名可以知道是全满的星星还是半满的星星
demo
<template>
<div class="Rating_gray">
<div class="Rating-gray_content">
<i
v-for="(item, index) in rating"
:key="index"
:class="'fa ' + item"
></i>
</div>
</div>
</template>
<script>
// 定义星星的最大长度
const LENGHT = 5
// 星星对应的class
const CLS_ON = 'fa-star'
const CLS_HALF = 'fa-star-half-empty'
// 填充
const CLS_OFF = 'fa-star-o'
export default {
name: 'rating',
props: {
ratingData: Number
},
computed: {
rating() {
//4.8 四个全星 一个半星
// 装星星
let result = []
// 对分数进行处理,向下取0.5倍数 4.8=>4 ----> 4.8*2=9.6=>9 /2 =>4.5 四个全星 一个半星
let score = Math.floor(this.ratingData * 2) / 2
//控制半星 小数对1取余的话 会有小数点
let hasDecimal = score % 1 !== 0
// 控制全星
let interger = Math.floor(score)
// 放入数组
for (let i = 0; i < interger; i++) {
// 全星
result.push(CLS_ON)
}
if (hasDecimal) {
// 半星
result.push(CLS_HALF)
}
while (result.length < LENGHT) {
// 补齐
result.push(CLS_OFF)
}
return result
}
}
}
</script>
<style lang="scss" scoped>
.Rating_gray {
position: relative;
overflow: hidden;
display: inline-block;
vertical-align: middle;
margin-right: 0.106667rem;
margin-right: 1.066667vw;
.Rating-gray_content {
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
> i {
color: #ffe339;
}
}
}
</style>