vue.js 오각별 구성 요 소 를 평가 하 는 인 스 턴 스 코드 구현

배 고 픈 오각별 은 세 가지 모양 이 있 는데,각각 실성,반 성,공 성 이다.

그리고 구성 요 소 를 실현 할 수 있어 야 합 니 다.이 오각별 은 크기 가 다 르 고 평 점 도 다 릅 니 다.예 를 들 어 만점 에 다섯 개의 별,네 개의 별,네 개의 별 등 이 있 습 니 다.
따라서 구성 요소 처럼 크기:size,점수:score 를 입력 해 야 합 니 다.
코드 는 다음 과 같 습 니 다:

<template>
   <div class="star" :class="starType">
     <span class="star-item" :class="itemClass" v-for="itemClass in itemClasses"></span>
   </div>
 </template>
 <script type="text/ecmascript-6">
   const LENGTH=5;
   const CLS_ON="on";
   const CLS_OFF="off";
   const CLS_HALF="half";
  export default {
     props:{
       size:{
         type:Number
       },
       score:{
         type:Number
       }
     },
     computed:{
       starType(){
         return "star-"+this.size;
       },
       itemClasses(){
         //    
        let result=[];
         let score=Math.floor(this.score*2)/2;
         let hasDecimal=score%1!==0; //     
        let integer=Math.floor(score);//  
        for (var 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" ref="sheetstyle/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
         height:15px
         margin-right:6px
         background-size:15px 15px
         &:last-child
           margin-right:0
         &.on
           bg-image('star36_on')
         &.half
           bg-image('star36_half')
         &.off
           bg-image('star36_off')
     &.star-24
       .star-item
         width:10px
         height:10px
         margin-right:3px
         background-size:10px 10px
         &:last-child
           margin-right:0
         &.on
           bg-image('star24_on')
         &.half
           bg-image('star24_half')
         &.off
           bg-image('star24_off')  
 </style>

그 중에서 size 는 48,36,24 를 사 용 했 기 때문에 그림 3 가지 유형의 그림 이 필요 합 니 다.그리고 서로 다른 해상도 에 적응 하려 면@2x.png,@3x.png 그림 이 있어 야 합 니 다.

참,bg-image 방법 은 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")

구성 요소 의 사용 은 매우 간단 하 다.

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

총결산
위 에서 말 한 것 은 소 편 이 소개 한 vue.js 가 오각별 구성 요 소 를 평가 하 는 인 스 턴 스 코드 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!