vue 星星评分组件

显示评分和打分组件，可现实半颗星星效果

效果图：

参数名	类型	说明
score	Number	分数 ，默认0，保留一位小数
disabled	Boolean	是否只读，默认false，鼠标点击可以打分
showText	Boolean	是否显示分数，默认false

<!--评分-->
<template>
  <div class="rate" :class="{'disabled':disabled}">
    <i v-for="i in 5" class="iconfont" @mouseenter="disabled?'':curScore=i" @mouseleave="disabled?'':curScore=''" @click="disabled?'':setScore(i)" :class="getClass(i)">
      <i v-if="disabled&&i==Math.floor(score)+1" class="iconfont icon-star" :style="'width:'+width"></i>
    </i>
    <span v-if="showText" class="text">{{curScore||score}}分</span>
  </div>
</template>

<script>
  export default {
    name:'MyRate',
    props: {
      score: {
        type: Number,
        default: 0,
        //required: true
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      showText: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        curScore: '',
        width:'',
      }
    },
    created: function () {
      this.getDecimal();
    },
    methods: {
      getClass(i) {
        if (this.curScore === '') {
          return i <= this.score ? 'icon-star' : 'icon-star-o'
        } else {
          return i <= this.curScore ? 'icon-star' : 'icon-star-o'
        }
      },
      getDecimal() {
        this.width=Number(this.score * 100 - Math.floor(this.score) * 100)+'%';
      },
      setScore(i){
        this.$emit('update:score',i);//使用`.sync`修饰符，对score 进行“双向绑定
      }
    }
  }
</script>

//页面中调用

  只读，不显示数字：<my-rate :score="1.5" disabled/>
  只读，显示数字：<my-rate :score="3.6" disabled showText/>
  鼠标点击评分,显示数字：<my-rate :score.sync="curScore" showText/>
  <button @click="submit">提交</button>
  //submit(){alert(this.curScore);} 提交显示分数