vue.js 实现评价五角星组件

饿了么的五角星有三种形状,分别是实星,半星,空星

 

并且组件要能实现,这个五角星不同大小,评分也不一样,比如满分五颗星,四颗半星,四颗星等等....

所以需要像组件传入一个大小:size,一个分数:score

代码如下:

<template>
    <div class="star" :class="starType">
        <span class="star-item" :class="itemClass" v-for="itemClass in itemClasses"></span>
    </div>
</template>
<script type="text/ecmascript-6">
    const LENGTH=5;
    const CLS_ON="on";
    const CLS_OFF="off";
    const CLS_HALF="half";

    export default {
        props:{
            size:{
                type:Number
            },
            score