mpvue 星星打分組件

上圖：

<template>
  <div class="container">
    <div v-for="(star,index) in stars" :key="index" style="position: relative">
      <img :src="star.img"  :style="{'width':(2*width + 'rpx'),'height':(2*height + 'rpx')}">
      <div class="left" @click="scoreBtn(1,index)"></div>
      <div class="right" @click="scoreBtn(2,index)"></div>
    </div>
  </div>
</template>

<script>
    export default {
      props:["imgs","width","height","starValue"],
      data(){
        return {
          stars:[]
        }
      },
      mounted(){
        this.stars = [
          {img:this.imgs[0]},
          {img:this.imgs[0]},
          {img:this.imgs[0]},
          {img:this.imgs[0]},
          {img:this.imgs[0]}
        ]
      },
      methods:{
        scoreBtn(type,index){
          let score = type === 1? (this.starValue /2):this.starValue;
          this.stars[index].img = type === 1? this.imgs[1]:this.imgs[2];
          this.stars.forEach((val,ind)=>{
            if(ind < index){
              score += this.starValue;
              val.img = this.imgs[2];
            }else if(ind > index) {
              val.img = this.imgs[0];
            }
          });
          this.$emit("ok",score)
        }
      }
    }
</script>

<style scoped>
  .container{
    display: flex;
    flex-direction: row
  }
.right{
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  left: 50%;
}
  .left{
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
  }
</style>

<!--
  屬性          類型        單位          說明
  imgs         Array        無          imgs爲三種狀態圖片url的數組（注意：數組的順序爲 空心圖片url》 半實心圖片url 》 實心圖片url）
  width        number       px            星星的寬度
  height       number       px            星星圖片的高度
  starValue    number       無            每一個星星表明分值
  ok           method       無             打分後的回調，返回一個分值

 距離：
 <score :imgs="imgs" :width="width" :height="height" :starValue="starValue" @ok="back"></score>

-->