自定义数组实现评分效果

效果图

主要代码

没做悬浮样式，只有最简单的点击选择

<div class="love">心动程度</div>
<div v-for="(imgItem, imgIndex) in imgList" :key="imgIndex" @click="imgLoveClick(imgItem)">
    <img class="m_l_10" src="@/assets/image/company/red_love.png" width="14" height="12" alt=""
        v-if="imgItem.isSelect">
    <img class="m_l_10" src="@/assets/image/company/grey_love.png" width="14" height="12" alt=""
        v-else>
</div>

// 心动值
const imgList = ref([
  {
    
     isSelect: false, currentIndex: 1 },
  {
    
     isSelect: false, currentIndex: 2 },
  {
    
     isSelect: false, currentIndex: 3 },
  {
    
     isSelect: false, currentIndex: 4 },
  {
    
     isSelect: false, currentIndex: 5 }
])
const imgLoveClick = (val) => {
    
    
  imgList.value = imgList.value.map(item => {
    
    
    if (item.currentIndex === val.currentIndex && !val.isSelect) {
    
    
      item.isSelect = true
    } else {
    
    
      item.isSelect = false
    }
    if (!item.isSelect && item.currentIndex < val.currentIndex) {
    
    
      item.isSelect = true
    }
    return item
  })
}