vue 評分星星元件
阿新 • • 發佈:2019-01-10
<div id="app">
<v-header :size="24" :score="5"></v-header>
</div>
<template> <div class="star" :class="styletype"> <span v-for="itemclass in itemclasses" class="star-item" :class="itemclass"></span> <!-- <span class="star-item half" ></span> --> </div> </template> <script> const CLS_ON = 'on'; const CLS_OFF = 'off'; const CLS_HALF = 'half'; const SCORE_LENGTH = 5; export default { props: { size: { type:Number }, score: { type:Number } }, computed: { styletype() { return 'size-'+this.size }, itemclasses() { console.log(this.score) let result = []; //0.5的倍數 let score = Math.floor(this.score*2)/2; //小數,任何整數取餘1,值為0 4.5%1 = 0.5 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<SCORE_LENGTH){ result.push(CLS_OFF) } return result } }, } </script> <style lang="stylus" rel="stylesheet/stylus"> @import '../../common/stylus/minxin' .star font-size:0 .star-item display:inline-block &.size-48 .star-item width:20px height:20px &.on bg-img('star48_on') &.off bg-img('star48_off') &.half bg-img('star48_half') &.size-36 .star-item width:15px height:15px &.on bg-img('star36_on') &.off bg-img('star36_off') &.half bg-img('star36_half') &.size-24 .star-item width:10px height:10px &.on bg-img('star24_on') &.off bg-img('star24_off') &.half bg-img('star24_half') </style>