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

妖狐艹你老母 2021-10-01 02:16 436阅读 0赞

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

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

文件目录：  
![在这里插入图片描述][20190812113842542.png]

#### 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>

#### 4、实现情况如下图 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]

[20190812113842542.png]: /images/20210812/efdee39c97f24b5a8a80918904662b9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]: /images/20210812/8a1cec4286df486a854aee8cd60a8629.png