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);} 提交顯示分數