VueJS2 星级评分组件实现：基于1-5整数渲染对应数量FontAwesome星星

嘿，这个需求在Vue 2里实现起来超简单，我给你拆解成几个步骤，保证一看就会：

首先得确保FontAwesome能在你的Vue 2项目里正常使用。如果你还没安装相关依赖，先跑这个命令：

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome@2

注意：Vue 2对应的vue-fontawesome版本是2.x，别装成3.x（那是给Vue 3用的）

然后在你的main.js里配置全局组件：

import Vue from 'vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faStar } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

// 把星星图标添加到图标库
library.add(faStar)

// 全局注册FontAwesome图标组件
Vue.component('font-awesome-icon', FontAwesomeIcon)

接下来写一个可复用的组件，它接收一个1-5之间的整数rating，然后渲染对应数量的星星。这里有两种简洁的实现方式：

方式一：用计算属性生成数组（可读性更强） #

<template>
  <div class="star-display">
    <!-- 循环渲染星星 -->
    <font-awesome-icon
      icon="star"
      class="star-icon"
      v-for="(_, index) in starList"
      :key="index"
    />
  </div>
</template>

<script>
export default {
  props: {
    rating: {
      type: Number,
      required: true,
      // 验证传入的rating必须是1-5的整数
      validator: (value) => {
        return Number.isInteger(value) && value >= 1 && value <= 5
      }
    }
  },
  computed: {
    starList() {
      // 生成一个长度等于rating的数组，用来循环渲染
      return Array.from({ length: this.rating })
    }
  }
}
</script>

<style scoped>
.star-icon {
  color: #ffc107; /* 给星星加个黄色，你可以自己换颜色 */
  margin: 0 2px;
  font-size: 1.2rem;
}
</style>

方式二：直接循环数字（更简洁） #

Vue的v-for支持直接循环数字，所以可以省掉计算属性：

<template>
  <div class="star-display">
    <font-awesome-icon
      icon="star"
      class="star-icon"
      v-for="(_, index) in rating"
      :key="index"
    />
  </div>
</template>

<script>
export default {
  props: {
    rating: {
      type: Number,
      required: true,
      validator: (value) => Number.isInteger(value) && value >=1 && value <=5
    }
  }
}
</script>

<style scoped>
.star-icon {
  color: #ffc107;
  margin: 0 2px;
  font-size: 1.2rem;
}
</style>

在需要展示星星的地方，直接引入并使用这个组件，传入你的rating值就行：

<template>
  <div>
    <!-- 比如传入3，就会渲染3个星星 -->
    <star-display :rating="3" />
  </div>
</template>

<script>
import StarDisplay from './components/StarDisplay.vue'

export default {
  components: {
    StarDisplay
  }
}
</script>

这样就搞定啦！如果以后需要扩展半星或者空心星的功能，只需要调整图标和逻辑就行～

内容的提问来源于stack exchange，提问作者Alessio