vue星级评分组件源码

vue星级评分组件源码

<template>
    

        <div id="star">
            <span v-for="classn in starArrs" :class="classn" class="staritem">span>
            
            

        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')                  
                }
                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('./[email protected]');

    }
    .offstar{
        background: url('./[email protected]');

    }
style>

背景图
[email protected]

[email protected]

[email protected]