vue-star评星组件开发

本文主要是介绍vue-star评星组件开发，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

star文件夹下建立Star.vue，及相关的图片信息。便于组件的就近维护
这里写图片描述
Star.vue：

<template><div class="star" :class="starSize"><span v-for="(itemClass,key) in itemClasses" :class="itemClass" class="star-item"></span></div>
</template>
<script>const LENGTH = 5;const CLS_ON = 'on';const CLS_HALF = 'half';const CLS_OFF = 'off';export default{props:{size:{ //尺寸，24,36,48type: Number},score:{type: Number}},computed:{starSize(){return 'star-'+ this.size;},itemClasses(){let result = [];let score = Math.floor(this.score*2)/2; //将数值调整为整数及.5的形式，例：4.3 => 4；4.6 => 4.5let hasDecimal = score %1 !==0;let integer = Math.floor(score);for(let 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" rel="stylesheet/stylus">
@import "../../common/stylus/mixin.styl";
.starfont-size: 0.star-itemdisplay: inline-blockbackground-repeat: no-repeat&.star-48.star-itemwidth: 20pxheight: 20pxmargin-right: 22pxbackground-size: 20px 20px&.last-childmargin-right: 0&.onbg-image('star48_on')&.halfbg-image('star48_half')&.offbg-image('star48_off')&.star-36.star-itemwidth: 15pxheight: 15pxmargin-right: 6pxbackground-size: 15px 15px&.last-childmargin-right: 0&.onbg-image('star36_on')&.halfbg-image('star36_half')&.offbg-image('star36_off')&.star-24.star-itemwidth: 10pxheight: 10pxmargin-right: 3pxbackground-size: 10px 10px&.last-childmargin-right: 0&.onbg-image('star24_on')&.halfbg-image('star24_half')&.offbg-image('star24_off')
</style>

Header.vue:

<star :size="48" :score="3.5"></star><script>
import star from '../star/Star.vue'
export default{components:{star}
}
</script>

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')