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;
   50%;
  height: 100%;
  top: 0;
  left: 50%;
}
  .left{
    position: absolute;
     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>

-->