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 实现评价五角星组件的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持！