Vue實現Rate組件（星星評分）

這個功能就類似於某寶在購物之后，對商品進行評價

先看一下效果

那么實現這個功能也很簡單，新建一個my-rate組件，然后上代碼

<template>
  <div class="rate" :class="{'disabled':disabled}">
    <span v-if="showText" class="text">{{curScore||score}}分</span>
    <div class="star-wrap">
      <i
        v-for="(i, index) in 5"
        :key="index"
        @mouseenter="disabled ? '' : curScore=i"
        @mouseleave="disabled ? '' : curScore=''"
        @click="disabled ? '' : setScore(i)"
        :class="getClass(i)"
      >
        <i v-if="disabled&&i==Math.floor(score)+1" class="icon-star" :style="'width:'+width"></i>
      </i>
    </div>
  </div>
</template>
<script>
export default {
  name: 'MyRate',
  props: {
    // 分數，默認0，保留一位小數
    score: {
      type: Number,
      default: 0
    },
    // 是否只讀，默認false，鼠標點擊可以打分
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否顯示分數，默認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)
    }
  }
}
</script>
<style lang="less" scoped>
.rate{
  .text{
    font-size: 18px;
    color: #ff7f2c;
    font-weight: bold;
  }
  .star-wrap{
    line-height: 0;
    .icon-star-o{
      position: relative;
      width:8px;
      height: 8px;
      line-height: 0;
      display: inline-block;
      margin-right: 2px;
      background: url('../../public/gray.png') 0 0 ~'/' auto 100%;   // 這邊是沒有選中星星的圖片

      .icon-star{  82  position: absolute;  83         left:0;  84         top:0;
 }  86  }  87     .icon-star{  88  width: 8px;  89  height: 8px;  90       line-height: 0;  91       display: inline-block;  92       margin-right: 2px;  93       background: url('../../public/yellow.png') 0 0 ~'/' auto 100%; // 這邊是選中之后星星的圖片  94  }  95     i:last-child{  96       margin-right: 0px;  97  }  98  }  99 } 100 </style>

注意，你的項目必須支持less，這邊樣式用的less

在頁面調用，首先引入上面的組件

  <div class="hello">
    <h3>只讀，不顯示數字：</h3>
    <my-rate :score="1.5" :disabled="true"/>
    <h3>只讀，顯示數字：</h3>
    <my-rate :score="3.6" :disabled="true" showText/>
    <h3>只讀，顯示數字：</h3>
    <my-rate :score="4" :disabled="true" showText/>
    <h3>鼠標點擊評分,顯示數字：</h3>
    <my-rate :score.sync="curScore" showText/>
  </div>

這樣就實現了一個封裝評分的組件