使用Pure Vue应用程序，无需任何外部程序包，即可轻松实现可定制的Awesome Vue Star Rating。

特征

1. 字体图标星星-缩放而不会损失质量
2. 可自定义的评分和评分说明
3. 选定值和描述的可定制结果
4. 可自定义的星数
5. 创建只读星
6. 可自定义的颜色

安装

npm install --save awesome-vue-star-rating

用法

步骤1：在我们的组件中导入AwesomeVueStarRating

import AwesomeVueStarRating from 'awesome-vue-star-rating'

export default {
  name: 'app',
  components: {
    AwesomeVueStarRating
  }
}
</script>

步骤2：将默认值加载到组件

data() {
    return {
      star: 5, // default star
      ratingdescription: [
        {
          text: 'Poor',
          class: 'star-poor'
        },
        {
          text: 'Below Average',
          class: 'star-belowAverage'
        },
        {
          text: 'Average',
          class: 'star-average'
        },
        {
          text: 'Good',
          class: 'star-good'
        },
        {
          text: 'Excellent',
          class: 'star-excellent'
        }
      ],
      hasresults: true,
      hasdescription: true,
      starsize: 'lg', //[xs,lg,1x,2x,3x,4x,5x,6x,7x,8x,9x,10x],
      maxstars: 5,
      disabled: false
    }
}

步骤3：将Rate组件放置在模板中

<template>
  <div id="app">
    <AwesomeVueStarRating :star="this.star" :disabled="this.disabled" :maxstars="this.maxstars" :starsize="this.starsize" :hasresults="this.hasresults" :hasdescription="this.hasdescription" :ratingdescription="this.ratingdescription" />
  </div>
</template>

第4步：自定义星形颜色样式，如下所示

<style lang="scss">
 .star {
  color: red;
 }
 .star.active {
  color: red;
 }
 .list, .list.disabled {
  &:hover {
    .star {
      color: red !important;
    }
    .star.active {
      color: red;
    }
  }
}
</style>

编译和热重装以进行开发

npm run serve

---

官网：https://github.com/Jebasuthan/vue-star-rating

演示：https://www.vue365.cn/code_demo.php?id=4566

GitHub下载：https://github.com/Jebasuthan/vue-star-rating/archive/refs/heads/main.zip