实现展示的效果图:
我这边写成组件可以参考一下:
用法 :<star :value="60"></star>
<template>
<div class="star_box">
<div class="star_item" v-for="index in 5" :key="index + 'star'">
<!-- 执行starIndex方法 -->
<img :src="imagePath[starIndex(index)].path" alt="" />
</div>
</div>
</template>
<script>
export default {
props: {
value: {
type: Number || String,
default: "99",
},
},
data() {
return {
// 这个命名对应🌟 0就是空🌟 5就是半颗 8就是多半颗 10就是满星
imagePath: [
{
path: "/image/0.png",
},
{
path: "/image/05.png",
},
{
path: "/image/08.png",
},
{
path: "/image/10.png",
},
],
};
},
methods: {
starIndex(index) {
var value = this.value;
// 达到条件让当前下标的🌟亮起
switch (index) {
case 1:
return value >= 60 ? 3 : 0;
case 2:
return value >= 60 ? 3 : 0;
case 3:
return value >= 60 ? 3 : 0;
case 4:
return value >= 80 ? 3 : value >= 70 ? 1 : 0;
case 5:
return value > 95 ? 3 : value > 90 ? 2 : value > 80 ? 1 : 0;
}
},
},
};
</script>
<style lang="scss">
.star_box {
/* 继承父盒子的宽度 */
width: 100%;
/* 布局方式可以随意更改 */
display: flex;
justify-content: space-around;
align-items: center;
.star_item {
/* 这里设置图片大小 */
> img {
width: 100%;
}
}
}
</style>
提供图片: