Vue实现简单的五角星评分组件,把分数星星化,适用任何分数,超简单!!!

使用Vue加css实现超简单的五角星评分,绝对简单!!! 

话不多说,直接上代码;

HTML

<div class="star"></div>

先创建五角星盒子.

    .star {
		width: 50px;
		height: 50px;
		margin-right: 20px;
        background: red;
        // 先画出五角星
		-webkit-clip-path: polygon(
			50% 0%,
			63% 38%,
			100% 38%,
			69% 63%,
			82% 100%,
			50% 75%,
			18% 100%,
			31% 63%,
			0% 38%,
			37% 38%
		);
	}

vue代码

<script setup>
	import { ref } from 'vue';
	let num = 3.64; // 后端穿过来的数据  最大是5
	let str = num + '';
	let numInt = ref(Math.ceil(num)); // 向上取整数
    let temp = str.split('.')[1]; // 获取小数点数据
	let afterTwo = temp > 10 ? temp : temp + '0'; // 补零避免出现小数点后一位情况, 也可以在接收        后端数据后进行toFixed(2)
	let numFFF = ref(5 - numInt.value); // 白色五角星的数量
</script>

最后修改HTML内容即可!

<!-- 循环数量为红色的小星星 -->
<div 
    class='star' 
    v-for="item in numInt"
    :style="{ background: item == numInt ? `linear-gradient(to left, #fff ${100 - afterTwo}%, red ${afterTwo }%)` : ''}"
></div> <!-- 动态绑定style -->


<!-- 添加fff类名变成白色背景, 循环背景为白色的小星星 -->
<div
	class="star fff"
	v-for="item in numFFF"
    v-if='numFFF != 0'
></div>
<!-- V3 v-if和v-for 可以一起使用; v2不建议一起使用比较浪费性能; -->

大致就是这个效果啦

这样就大功告成了,主要是使用了css渐变色来控制星星颜色所占的百分比,感兴趣的朋友可以看下css渐变色喔! 

第一次发CSDN哪里不足还请指出!谢谢各位道友!