vue-星星评分带小数点

效果图

重点：

• 我用的是总评分5分，一组5个星星······total:5,//星星总数;······v-for=“star in total”
• 每个星星的尺寸······size:4.5,······//宽4.5vw，高4.5vw;

 var vm = new Vue({
	el:'#app',
	data:{
		star:'4.6',//总分
		total:5,//星星总数
		size:4.5,//尺寸
	},
 })

• 小数点的星星评分展示，需要用到两组星星，一组是底部的暗色星星，一组是顶部的亮色星星；
• 星星尺寸 {‘width’:${尺寸}vw,‘height’:${尺寸}vw}
• .starbox总长度和高度 :style="{‘width’:${尺寸*星星总数}vw,‘height’:${尺寸}vw}"
• 星星定位···position: absolute;亮星星覆盖在暗星星上面；
• 利用亮星星.star_box2百分比缩短长度，溢出隐藏 :style="{‘width’:${总分 / 星星总数 * 100}%}"
• 星星溢出隐藏···white-space: nowrap;overflow: hidden;不然亮星星长度缩短后会溢出换行显示；

<div class="align-center totalnum">
	<div class="totalstar f-w-b">{{star}}</div>
	<div>
	    <div class="delname c-999">评分</div>
	    <div class="starbox" :style="{'width':`${size*total}vw`,'height':`${size}vw`}" style="position:relative;">
	        <!-- 暗星星 -->
	        <div class="star_box1" style="white-space: nowrap;overflow: hidden;position: absolute;">
	            <span style="display: inline-block;" class="star iconfont iconshoucang c-999" 
	            :style="{'width':`${size}vw`,'height':`${size}vw`}" v-for="star in total"></span>
	        </div>
	        <!-- 亮星星 -->
	        <div class="star_box2" style="white-space: nowrap;overflow: hidden;position: absolute;" 
	        :style="{'width':`${star / total * 100}%`}">
	            <span style="display: inline-block;" class="star iconfont iconshoucang1" 
	            :style="{'width':`${size}vw`,'height':`${size}vw`}" v-for="star in total"></span>
	        </div>
	    </div>
	</div>
</div>

• 比较好的方法可以用计算属性computed动态展示style的样式，但我试过传参的写法没有成功，如果有更好的方法还请大佬指导一二；