五星级评价

Posted 2021-01-19 candy-yao

一、效果

二、html

　　<div class="commentTitle clearfix">
      <div class="comment floatL">服务态度</div>
      <div class="starBox" ref="star1">
        <div class="star" v-for="(item,index) in starArr1" :key="index" @click="starClick1(index)">
          <img :src="‘../../static/images/‘+item.imgSrc">
        </div>
      </div>
    </div>

三、JS

starArr1: [{imgSrc: ‘star1.png‘}, {imgSrc: ‘star1.png‘}, {imgSrc: ‘star1.png‘}, {imgSrc: ‘star1.png‘}, {imgSrc: ‘star1.png‘}] //  变量

　　starClick1 (index) {
      this.starArr1.forEach((element, i) => {
        this.$set(element, ‘imgSrc‘, ‘star1.png‘)
        if (i <= index) {
          this.$set(element, ‘imgSrc‘, ‘star2.png‘)
        }
      })
      this.commentScore = index + 1 //  评价成绩
    }

star1.png： 

 

 

star2.png：

 

 四、css

.commentTitle {
  height: 1.1rem;
  line-height: 1.1rem;
  font-size: .32rem;
  color: #333333;
  padding-top: .4rem;
}
.comment {
  line-height: .7rem;
  padding-right: 10px;
}
.starBox {
  display: flex;
  display: -webkit-flex;
  line-height: .9rem;
}
.star img {
  width: .8rem;
  height: .4rem;
}