vue评分组件|awesome-vue-star-rating

简介

awesome-vue-star-rating是一款纯vue评分插件，它可以自定义的评分和评分说明，自定义的星数等，简单易用。

awesome-vue-star-rating评分组件基于vue2实现，它的特点有：

• 字体图标星星-缩放而不会损失质量

• 可自定义的评分和评分说明

• 选定值和描述的可定制结果

• 可自定义的星数

• 创建只读星

• 可自定义的颜色

安装

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

使用

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

<script>
import AwesomeVueStarRating from "awesome-vue-star-rating";

export default {
    name: "App",
    components: {
    AwesomeVueStarRating,
    },
    data() {
    return {
        star: 2,
        star2: 4,
        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",
        },
        ],
        ratingdescription2: [
        {
            text: "I hate it",
            class: "star-poor",
        },
        {
            text: "I dont like it",
            class: "star-belowAverage",
        },
        {
            text: "Its Okay",
            class: "star-average",
        },
        {
            text: "I like it",
            class: "star-good",
        },
        {
            text: "I Love it",
            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,
        hasresults2: true,
        hasdescription2: true,
        starsize2: "lg", //[xs,lg,1x,2x,3x,4x,5x,6x,7x,8x,9x,10x],
        maxstars2: 5,
        disabled2: false,
        starsize3: "xs",
    };
    },
};
</script>
<style lang="scss">
    .star {
     color: red;
    }
    .star.active {
     color: red;
    }
    .list, .list.disabled {
     &:hover {
       .star {
         color: red !important;
       }
       .star.active {
         color: red;
       }
     }
   }
</style>

👉 效果演示