vue实现简单的星级评分组件源码

vue星级评分组件源码，具体代码如下所示：

<!--自定义组件-->
<template>
 <!--结构层-->
 <div id="star">
 <span v-for="classn in starArrs" :class="classn" class="staritem"></span>
 <!--<span class="staritem onstar"></span>
 <span class="staritem onstar"></span>
 <span class="staritem halfstar"></span>
 <span class="staritem offstar"></span>-->
 <!--根据传递过来的分数得到对应的星星
 4.7 四颗半星
 1个位数代表的是全里亮，
 2，当分数大于等于0.5 是一个半星
 3.当全星和半星不足五个的时候，剩下的都是灰色的星星
 -->
 </div>
</template>
<script>
// 行为
 export default{
 props:['score'],
 created(){
 console.log("子组件");
 },
 mounted(){
 console.log("打印传递的分数");
 },
 computed:{
 starArrs(){
 var starArr=[]; //3.9
// 全星星的个数
 let onstar = parseInt(this.score);
 console.log(onstar)
// 是否有半星
 let halfStar = Math.round(this.score-onstar)?true:false;
// 有多少课灰色的星星
 for (var i=0;i<onstar;i++) {
 starArr.push('onstar') 
 }
 if(halfStar){
 starArr.push('halfstar') 
 }
 while(starArr.length<5){
 starArr.push('offstar') 
 }
 return starArr;
 }
 }
 }
</script>
<style scoped="scoped">
 /*独立作用域的样式*/
 .staritem{
 display: inline-block; 
 width: 0.37037rem;
 height: 0.37037rem;
 }
 /*全星星*/
 .onstar{
 background: url(./star24_on@2x.png);
 background-size: 0.37037rem; 
 }
 .halfstar{
 background: url('./star24_half@2x.png');
 }
 .offstar{
 background: url('./star24_off@2x.png');
 }
</style>

背景图

star24_on@2x.png 

star24_half@2x.png  

star24_off@2x.png

总结

以上所述是小编给大家介绍的vue实现简单的星级评分组件源码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！