star组件

一、star组件

<template>
    <div class="star" :class="starType">
        <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by="$index" ></span>
    </div>
</template>

<script type="text/ecmaScript-6">
    const LENGTH = 5
    const CLS_ON = ‘on‘
    const CLS_HALF = ‘half‘
    const CLS_OFF = ‘off‘
    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(this.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)
             }
             console.log(‘result‘, result)
             return result
          }
      }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../common/styles/minxin.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
       &.off
           bg-image(‘../../assets/img/star48_off‘)
       &.on
           bg-image(‘../../assets/img/star48_on‘)
       &.half
           bg-image(‘../../assets/img/star48_half‘)
    &.star-36
      .star-item
       width:15px
       height:15px
       margin-right:16px
       background-size:15px 15px
       &.last-child
             margin-right:0
       &.on
            bg-image(‘../../assets/img/star36_on‘)
       &.half
            bg-image(‘../../assets/img/star36_half‘)
       &.off
            bg-image(‘../../assets/img/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(‘../../assets/img/star24_on‘)
        &.half
            bg-image(‘../../assets/img/star24_half‘)
        &.off
            bg-image(‘../../assets/img/star24_off‘)

</style>

二、图片背景引用

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

三、引用

 import star from ‘../../components/star/star‘

四、注册

 props: {
        seller: {
            type: Object
        }
      },

五、应用

<star :size="48" :score="seller.score"></star>