自定义数组实现评分效果

古城微笑少年丶 2024-03-24 10:47 74阅读 0赞

#### 自定义数组实现评分效果 ####

*  效果图
 *   *  主要代码

## 效果图 ##

![在这里插入图片描述][d3b2997c626e4fca8d3bcd4fde6ab351.png]

### 主要代码 ###

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

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

[d3b2997c626e4fca8d3bcd4fde6ab351.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/ee04139b4cdd41acbd0da625c4007efb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，74人围观）

还没有评论，来说两句吧...

相关阅读

相关自定义数组实现评分效果

自定义数组实现评分效果效果图主要代码效果图 ![在这里插入图片描述][d3b2997c626e4fca8d3bcd4fde6ab351.p

古城微笑少年丶/ 2024年03月24日 10:47/ 0 赞/ 75 阅读

相关创建自定义 React 星级评分组件

在本教程中，我们将构建一个自定义的 React 星级评分组件。这种类型的组件允许用户通过单击鼠标给某物打 1 到 5 星的评级。以下是完成的组件的外观和功能： ![在这

小鱼儿/ 2023年10月11日 23:12/ 0 赞/ 103 阅读

相关 Solr——自定义评分组件

solr-custom-score solr自定义评分组件demo （一）背景介绍大多数时候我们使用lucene/solr/elasticsearch自带的评分

骑猪看日落/ 2023年06月02日 07:49/ 0 赞/ 21 阅读

相关 Android自定义星星评分控件

下面为控件的实现历程：此控件高效，直接使用ondraw绘制，先亮照： ![这里写图片描述][20160718165223964]![这里写图片描述][20160718

亦凉/ 2022年12月04日 01:13/ 0 赞/ 355 阅读

相关 lucene学习之自定义评分

想要根据城市来自定义评分，原来的输出：根据【你好.我是jack】一共找到3文件编号：0 分数: 1.0 id: 1 city: 北京编号：1 分数: 1.0 i

你的名字/ 2022年08月21日 06:40/ 0 赞/ 164 阅读

相关纯css实现自定义alt效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

怼烎@/ 2022年08月12日 16:11/ 0 赞/ 124 阅读

相关自定义view实现水波纹效果

水波纹效果： 1.标准正余弦水波纹； 2.非标准圆形液柱水波纹；虽说都是水波纹，但两者在实现上差异是比较大的，一个通过正余弦函数模拟水波纹效果，另外一个会运用到

痛定思痛。/ 2022年07月24日 11:19/ 0 赞/ 251 阅读

相关如何实现Solr自定义评分查询

\[size=medium\] （一）背景介绍大多数时候我们使用lucene/solr/elasticsearch自带的评分查询都是没问题的，当然这也仅仅

蔚落/ 2022年04月11日 05:09/ 0 赞/ 425 阅读

相关 lucene实现自定义的评分

1、工程目录 ![20130501213737502][] 2、自定义评分一、根据文件大小来评分，文件越大，权重越低 package util;

朴灿烈づ我的快乐病毒、/ 2022年03月01日 07:50/ 0 赞/ 218 阅读

相关 HTML+CSS实现五角星评分效果

文章目录 1.效果： 2.HTML 3.CSS 4.图片 5.另一种样式 1.效果： ![在这里插入图片描述][2019060513

谁践踏了优雅/ 2022年01月22日 06:15/ 0 赞/ 1180 阅读