vue.js 實現評價五角星組件的實例代碼

2019-11-19 13:16:32

字體：大中小

來源：轉載

供稿：網友

餓了么的五角星有三種形狀,分別是實星,半星,空星

并且組件要能實現,這個五角星不同大小,評分也不一樣,比如滿分五顆星,四顆半星,四顆星等等....

所以需要像組件傳入一個大小: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")

組件的使用就很簡單了