VUE星星评分插件

这篇文章算得上是完善同行的文章，原文中代码没问题，但是缺少依赖，导致无法出现星星评分效果！完善后的效果如下！

原作者文章链接vue 星星(共5分)评分，还有一篇文章估计也是同样的问题vue 星星评分组件这篇文章功能更强大一些，我这里只对第一篇文章做了完善，第二篇应该也是同样的问题！代码复制上去后无法显示星星，lou了一眼代码发现使用了fa-star这些玩意！顺个藤摸个瓜到了这里

ok，到了这里就明白了！
编写星星评分组件

<template>
    <div class="Rating-gray">
        <i v-for="(item,index) in itemClasses" :key="index" class="fa" :class="item"></i>
    </div>
</template>

<script>
    const LENGTH = 5;

    const CLS_ON = "fa-star";
    const CLS_HALF = "fa-star-half-empty";
    const CLS_OF = "fa-star-0";

    export default {
        name:"Rating",
        props:{
            rating:Number
        },
        computed:{
            itemClasses(){
                let result = [];
                // 如 4.8 对分数进行处理, 向下取0.5的倍数
                let score = Math.floor(this.rating*2)/2;
                // 用来判断哪种星星的标准
                let integer = Math.floor(score);
                let hasDecimal = score % 1 !== 0;
                for (let i = 0; i < integer; i++) {
                    result.push(CLS_ON);
                };
                if(hasDecimal) {
                    result.push(CLS_HALF);
                };
                while(result.length < LENGTH) {
                    result.push(CLS_OF);
                };
                return result;
            }
        }
    }
</script>

<style scoped>
    .Rating-gray {
        margin-right: 1.066667vw;
        color: #ffbe00;
        display: inline-block;
    }
</style>

npm引用一下

npm install font-awesome --save

入口main.js中引入
import ‘font-awesome/css/font-awesome.min.css’

组件调用

<template>
    <!--服务评价-->
    <div>
        <div id="s-body">
            <div id="s-body-title">
                <h4>服务评价</h4>
            </div>
            <div id="s-body-content" >
                <div class="s-body-item"  v-for="(i,index) in list">
                    <div class="s-body-item-l">
                        <img class="s-body-item-avatar" src="https://avatar.csdnimg.cn/3/5/1/1_csdn877425287_1555773332.jpg">
                        <div class="s-body-item-data-group">
                            <div class="s-body-item-data-nickname">程序员劝退师-TAO</div>
                            <div class="s-body-item-data-problem">这是一个带计数的多行输入框</div>
                            <div class="s-body-item-data-content">楼上的童鞋 this.$refs.content.content这样就可以取到值了，不需要v-model绑定</div>
                        </div>
                    </div>
                    <div class="s-body-item-r">
                        <div class="s-body-item-r-star">
                            <Rating :rating="index+1"/>
                        </div>
                        <div class="s-body-item-r-date">2021-02-03</div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    import Rating from "../../components/Rating"
    export default {
        components:{
            Rating
        },
        name: "serviceEvaluation",
        data(){
            return{
                list:[1,2,3,4,5]
            }
        },

    }
</script>

<style lang="scss" scoped>
    html * {
        /*outline: 1px solid red;*/
    }
    #s-body{
        #s-body-title{
            width: 59.6rem;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 1rem;
            border-bottom: 1px #f0f2f5 solid;
        }
        #s-body-content{
            padding: 1rem;
            width: 59.6rem;
            .s-body-item{
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px #f0f2f5 solid;
                padding-bottom: 0.5rem;
                margin-bottom: 0.5rem;
                .s-body-item-l{
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    .s-body-item-avatar{
                        width: 4rem;
                        height: 4rem;
                        margin-right: 1rem;
                    }
                    .s-body-item-data-group{
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        flex-direction: column;
                        div{
                            width: 48rem;
                            display: flex;
                            align-items: center;
                            justify-content: flex-start;
                        }
                        .s-body-item-data-nickname{
                            font-size: 15px;
                            font-weight: 700;
                            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
                            color: #333;
                        }
                        .s-body-item-data-problem{
                            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
                            font-size: 14px;
                            line-height: 1.42857143;
                            color: #333;
                        }
                        .s-body-item-data-content{
                            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
                            font-size: 14px;
                            line-height: 1.42857143;
                            color: #333;
                        }
                    }
                }
                .s-body-item-r{
                    height: 4rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    width: 5rem;
                    .s-body-item-r-star{
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        height: 2rem;
                        width: 6rem;
                    }
                    .s-body-item-r-date{
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        height: 2rem;
                        font-size: 12px;
                        color: #666;
                        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
                    }

                }
            }
        }
    }

</style>

搞定！