五星级评价

时间 2019-11-10 标签五星级评价

1、效果css

2、Htmlweb

　　<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>

3、JSflex

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：

4、cssthis

.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;
}