<template>
<div class="Rating-gray">
<i v-for="(item,index) in itemClasses" :key="index" class="fa" :class="item"></i>
</div>
</template>
<script>
// 星星長度
const LENGTH = 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: {
rating: Number
},
computed: {
itemClasses() {
// 4.8 四個全星 1個半星
let result = [];
// 對分數進行處理, 向下取0.5的倍數
let score = Math.floor(this.rating * 2) / 2;
// 控制半星
let hasDecimal = score % 1 !== 0;
// 全星
let integer = Math.floor(score);
// 全星放入到數組中
for (let i = 0; i < integer; i++) {
result.push(CLS_ON);
}
// 半星
if (hasDecimal) {
result.push(CLS_HALF);
}
// 補齊
while (result.length < LENGTH) {
result.push(CLS_OFF);
}
return result;
}
}
};
</script>
<style scoped>
.Rating-gray {
margin-right: 1.066667vw;
color: #ffbe00;
display: inline-block;
}
</style>