饿了么的五角星有三种形状,分别是实星,半星,空星

并且组件要能实现,这个五角星不同大小,评分也不一样,比如满分五颗星,四颗半星,四颗星等等....

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