本组件基于element-ui 的图标库（星星图标）

第一步：

vue + webpack + element-ui 框架

第二步：

创建Rate.vue文件，实现双向绑定分数

第三部：

使用组件

代码

在app.vue中引入组件

    


        


            


                


                

            

            


                

                    <Rate v-model='value' size="32px">
                

            

        

        


            


                


                

            

            


                

                    <span>{{value}} 分</span>
                

            

        

        


            


                


                

            

            


                

                    </Rate>
                

            

        

    

import Rate from './components/Rate'

组件

    


        


            


                


                

            

            


                

                    <template>
                

            

        

        


            


                


                

            

            


                

                    <div class="Rating" :value='value'>
                

            

        

        


            


                


                

            

            


                

                    <ul class="Rating-list">
                

            

        

        


            


                


                

            

            


                

                    <li v-for="s in 5" @click="changeRate(s)">
                

            

        

        


            


                


                

            

            


                

                    <i :class="s <= star ? 'el-icon-star-on':'el-icon-star-off'" :style='style'></i>
                

            

        

        


            


                


                

            

            


                

                    </li>
                

            

        

        


            


                


                

            

            


                

                    </ul>
                

            

        

        


            


                


                

            

            


                

                    <slot></slot> <!--显示用户自定义内容-->
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

        


            


                


                

            

            


                

                    </template>
                

            

        

    

    


        


            


                


                

            

            


                

                    props: {
                

            

        

        


            


                


                

            

            


                

                    size: { //父组件传值设置字体大小
                

            

        

        


            


                


                

            

            


                

                    type: String,
                

            

        

        


            


                


                

            

            


                

                    default: '16px'
                

            

        

        


            


                


                

            

            


                

                    },
                

            

        

        


            


                


                

            

            


                

                    value: { //绑定value，与$emit实现双向绑定
                

            

        

        


            


                


                

            

            


                

                    type:Number,
                

            

        

        


            


                


                

            

            


                

                    default:0 
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    },
                

            

        

        


            


                


                

            

            


                

                    data() {
                

            

        

        


            


                


                

            

            


                

                    return {
                

            

        

        


            


                


                

            

            


                

                    star: this.value, // 初始化
                

            

        

        


            


                


                

            

            


                

                    style: {
                

            

        

        


            


                


                

            

            


                

                    fontSize: this.size //通过prop传值设置星星字体大小
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    },
                

            

        

        


            


                


                

            

            


                

                    methods: {
                

            

        

        


            


                


                

            

            


                

                    changeRate(s) {
                

            

        

        


            


                


                

            

            


                

                    this.star = s //更新当前星星数量
                

            

        

        


            


                


                

            

            


                

                    this.$emit('input', s); //将当前星星数量s与v-model绑定
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

    

demo演示