图标下载:
创建starXIng.vue
<template>
<div class="statBox">
<div v-for="(item, index) in starArr" :class="item" :key="index"></div>
</div>
</template>
<script>
export default {
props: {
star: String,
},
computed: {
starArr() {
//星级评分
var starClass = [];
var onstar = Number(this.star);
// 满星
for (let i = 0; i < onstar; i++) {
starClass.push("on_star");
}
//灰色星星
while (starClass.length < 5) {
starClass.push("off_star");
}
return starClass;
},
},
data() {
return {
nostart: [1, 2, 3, 4, 5],
};
},
watch: {},
methods: {},
};
</script>
<style lang="scss" scoped>
.statBox{
display: flex;
}
.on_star {
width: 40rpx;
height: 40rpx;
display: inline-block;
margin-right: 40rpx;
background: url('/stars_icon.png'); //高亮图标
background-size: 100%;
}
.off_star {
width: 40rpx;
height: 40rpx;
display: inline-block;
margin-right: 40rpx;
background: url('/stars_none_icon.png');//灰色图标
background-size: 100%;
}
</style>
使用
star表示高亮几颗星
<statr-xing star="1"></statr-xing>