vue - 项目之评价星星组件的封装-蒲公英云

vue - 项目之评价星星组件的封装

当我们做的项目涉及到交易评价、电视评价、小说评价等方面的时候，我们大多都会选择根据客户评定的分数来对应显示评价星的选中与否，下面我来分享一下我所封装的评价星组件：

1、封装star组件

<template>
  <div class="star" :class="starType">
    <span v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" :key="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(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/style";
</style>

2、样式文件（这里的样式是使用stylus来写的）

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
    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('../../common/img/star48_on')
        &.half
          bg-image('../../common/img/star48_half')
        &.off
          bg-image('../../common/img/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('../../common/img/star36_on')
        &.half
          bg-image('../../common/img/star36_half')
        &.off
          bg-image('../../common/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('../../common/img/star24_on')
        &.half
          bg-image('../../common/img/star24_half')
        &.off
          bg-image('../../common/img/star24_off')

文件目录：
在这里插入图片描述

3、使用组件

<template>
  <div class="header">
        <div class="star-wrapper">
        <star :size="48" :score="seller.score"></star>
     </div>
  </div>
</template>
<script>
  import star from 'components/star/star';
  export default {
    components: {
      star
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/style";
 </style>