vue实现简单的星级评分组件源码

下面详细讲解“vue实现简单的星级评分组件源码”的完整攻略。

步骤一：编写HTML结构

首先，我们需要编写一个HTML结构，来展示星级评分组件。在Vue组件里，我们需要使用template标签，编写类似以下的HTML代码：

<template>
  <span>
    <i v-for="index in maxScore" :key="index" :class="getCurrentClass(index)"></i>
  </span>
</template>

这段HTML代码实际上就是一个包含若干个星星的容器，其中“maxScore”是组件的最高评分，而getCurrentClass方法则是根据当前评分和最高评分来计算被选中的星星的CSS类名。

步骤二：编写Vue组件

接下来，我们需要编写真正的Vue组件。这里使用Vue的单文件组件（即.vue文件），在其中编写包含JS、CSS和HTML代码的组件。

首先，我们需要在组件的script标签里定义组件的属性和方法，包括评分、最高评分、计算方法getCurrentClass等，示例如下：

<script>
  export default {
    props: {
      score: Number, // 当前评分
      maxScore: Number // 最高评分
    },
    computed: {
      // 计算当前组件应该有的 CSS class
      getCurrentClass(index) {
        if (index <= this.score) {
          return 'icon-star active';
        } else if (index - 0.5 === this.score) {
          return 'icon-star-half active';
        } else {
          return 'icon-star';
        }
      }
    }
  }
</script>

然后，我们需要在组件的template标签里引用第一步中编写的HTML结构，并且使用当前组件的计算方法来呈现正确的星星样式。

完整的Vue组件代码如下：

<template>
  <span>
    <i v-for="index in maxScore" :key="index" :class="getCurrentClass(index)"></i>
  </span>
</template>

<script>
  export default {
    props: {
      score: Number, // 当前评分
      maxScore: Number // 最高评分
    },
    computed: {
      // 计算当前组件应该有的 CSS class
      getCurrentClass(index) {
        if (index <= this.score) {
          return 'icon-star active';
        } else if (index - 0.5 === this.score) {
          return 'icon-star-half active';
        } else {
          return 'icon-star';
        }
      }
    }
  }
</script>

步骤三：使用Vue组件

使用上面编写的Vue组件非常简单，只需要在父组件中导入组件，然后像使用普通HTML标签一样使用即可。比如，如果要呈现一个评分为3.5分（最高评分为5分）的评分组件，代码如下：

<template>
  <div>
    <star-rating :score="3.5" :max-score="5"></star-rating>
  </div>
</template>

<script>
  import StarRating from './StarRating.vue'
  export default {
    components: {
      StarRating
    }
  }
</script>

这样，就可以在父组件中引用我们编写的Vue组件，来展示一个星级评分组件。

最后，对于父组件，我们还需要引入所需要的CSS文件，来让组件拥有正确的样式。这里就不再赘述。

示例1：单独的评分组件

这是一个常见的使用场景，比如需要展示某个商品的评分。在这种情况下，我们只需要使用一个StarRating组件即可。

<template>
  <div>
    <h3>商品评分</h3>
    <star-rating :score="4.5" :max-score="5"></star-rating>
  </div>
</template>

<script>
  import StarRating from './StarRating.vue'
  export default {
    components: {
      StarRating
    }
  }
</script>

示例2：评分列表

在某些场景下，我们需要展示多个评分，并且让用户能够对每一个评分进行修改。在这种情况下，我们需要多个StarRating组件，并且考虑如何绑定数据和监听事件。

对于数据绑定，我们可以使用v-model指令来实现。比如，每个评分都有一个id属性，并且存储在父组件的ratings数组中。这时，可以使用以下代码来展示一个评分列表：

<template>
  <div>
    <h3>评分列表</h3>
    <div v-for="rating in ratings" :key="rating.id">
      <span>{{rating.name}}</span>
      <star-rating v-model="rating.score" :max-score="5"></star-rating>
    </div>
  </div>
</template>

<script>
  import StarRating from './StarRating.vue'
  export default {
    components: {
      StarRating
    },
    data() {
      return {
        ratings: [
          { id: 1, name: '评分1', score: 3.5 },
          { id: 2, name: '评分2', score: 4 },
          { id: 3, name: '评分3', score: 2.5 }
        ]
      }
    }
  }
</script>

这样，就可以展示一个评分列表，并且允许用户对评分进行修改。

至此，“vue实现简单的星级评分组件源码”的完整攻略讲解结束。