Vue-star development of Star-rating module

The

Star folder establishes the Star.vue and related picture information. Easy to maintain nearby components

Star.vue:

<template> <div class= "star": class= "Starsize" > <span v-for= "(itemclass,key) in itemclasses": C lass= "Itemclass" class= "Star-item" ></span> </div> </template> <script> const LENGTH = 5
    ;
    Const CLS_ON = ' on ';
    Const CLS_HALF = ' HALF ';
    Const Cls_off = ' off '; Export default{props:{size:{//dimensions, 24,36,48 Type:number}, S core:{Type:number}}, computed:{Starsize () {RE
            Turn ' star-' + this.size;
                }, Itemclasses () {Let result = []; Let score = Math.floor (this.score*2)/2;
                Adjusts the numeric value to the form of an integer and. 5, for example: 4.3 => 4;4.6 => 4.5 Let Hasdecimal = score%1!==0;
                Let integer = Math.floor (score);
                For (let I =0;i<integer;i++) {Result.push (cls_on); } if (hAsdecimal) {Result.push (cls_half);
                while (result.length<length) {Result.push (Cls_off);
            return result; }} </script> <style lang= "Stylus" rel= stylesheet/stylus "> @import". /..  /common/stylus/mixin.styl ";. Star font-size:0. Star-item display:inline-block background-repeat:  No-repeat &.star-48. Star-item width:20px height:20px margin-right: 22px background-size:20px 20px &.last-child margin-right:0 ;. On Bg-image (' star48_on ') &.half bg-image (' Star48_half ') & . Off bg-image (' Star48_off ') &.star-36. Star-item width:15px Heigh t:15px margin-right:6px Background-size:15px 15px &.last-child margin-right:0 &.on bg-image (' s Tar36_on ') &.half bg-image (' star36_half ') &.off bg-image (' Star36_off ') &.star-24. Star-item width:10px height:10px Margin-rig ht:3px background-size:10px 10px &.last-child margin-right:0 &A MP;. On Bg-image (' star24_on ') &.half bg-image (' star24_half ') Off Bg-image (' Star24_off ') </style>

Header.vue:

<star:size= "score=": "3.5" ></star>

<script>
import star from ' ... /star/star.vue '
export default{
    components:{
        star
    }
}
</script>

Mixin.styl:

Bg-image ($url)
    background-image:  url ($url + ' @2x.png ')
    @media (-webkit-min-device-pixel-ratio:3), ( Min-device-pixel-ratio:3)
        Background-image:url ($url + ' @3x.png ')