vue.js 实现评价五角星组件的实例代码
程序员文章站
2022-06-30 09:50:10
饿了么的五角星有三种形状,分别是实星,半星,空星
并且组件要能实现,这个五角星不同大小,评分也不一样,比如满分五颗星,四颗半星,四颗星等等....
所以需要像组件传...
饿了么的五角星有三种形状,分别是实星,半星,空星
并且组件要能实现,这个五角星不同大小,评分也不一样,比如满分五颗星,四颗半星,四颗星等等....
所以需要像组件传入一个大小: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 实现评价五角星组件的实例代码,希望对大家有所帮助