效果预览:
所需素材:满星 和 未满星各一张
因为考虑到复用问题,所以将其写成组件,子组件代码如下
<template>
<ul>
<li v-for="(item, index) in starArr" :key="index">
<img :src="[ item == 0 ? starIcon[0] : starIcon[1] ]" alt="星级评分">
</li>
</ul>
</template>
<script>
export default {
data() {
return {
starArr: [],//星级评分所需处理的数组
starIcon: [
require("../../assets/img/star/star0.png"),
require("../../assets/img/star/star1.png")
]//星级评分所需图片
};
},
methods: {
//处理评分所得对应星级
starLevel(evaluate) {
let starGrade = Math.round(evaluate / 2);//最高评分为10,星级只有5级 所以需要除2,再四舍五入获取评分数
for (let i = 1; i <= 5; i++) {
i <= starGrade ? this.starArr.push(1) : this.starArr.push(0)//如果i小于当前评分,则满星,否则为不满
}
}
},
mounted: function() {
//若父组件有评分参数传递过来就立刻执行处理函数starLevel()
if (this.grade) {
this.starLevel(this.grade)
}
},
props: ['grade']//获取父组件传递过来的评分参数
};
</script>
<style scoped lang="scss">
ul {
overflow: hidden;
}
li {
width: calc(100% / 5);
float: left;
img {
width: 100%;
}
}
</style>
父组件调用
<template>
<div>
<star
v-for="grade in starGradeArr"
:key="grade"
:grade="grade"
>
</star>
</div>
</template>
<script>
import star from "./components/publicModule/star";//引入星级评分组件
export default {
data() {
return {
starGradeArr: [1,7,9,4],//星级评分数组
}
},
components: {
star
}
};
</script>