鼠标悬浮选中单选按钮事件

最新推荐文章于 2024-05-27 21:42:27 发布

C_SDNY1

最新推荐文章于 2024-05-27 21:42:27 发布

阅读量608

点赞数

分类专栏： vue js 知识

本文链接：https://blog.youkuaiyun.com/weixin_50116003/article/details/119352677

版权

vue js 知识专栏收录该内容

4 篇文章

订阅专栏

这篇博客探讨了如何实现鼠标悬浮到单选按钮上即选中该选项的效果，同时介绍了通过鼠标悬浮显示注释框的功能。通过实现这些交互，提升了用户的使用体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标悬浮单选框就选中

 <el-radio-group v-model="algorithmRadio" class="groupOver">
              <el-radio
                v-for="(item, index) in algorithmArr"
                :key="index"
                :label="item.id">
                //这里我用的v-on:mouseover，因为其他方式使用不起作用 $event 是悬浮事件
                //注意要设置节点id，js写事件要用到
                  <span v-on:mouseover="over($event, index)"
                    :id="'algorithm' + index">{{ item.algorithmName }}</span>
              </el-radio>
            </el-radio-group>

    over(row) {
      console.log(row)
      
    },

打印出来的鼠标悬浮事件：

 over(row) {
      console.log(row)
      //获取该节点id:row.target.id , js写出点击事件 click()
      document.getElementById(row.target.id).click();
    },

这样鼠标悬浮在单选框就会被选中在这里插入图片描述

鼠标悬浮显示注释框

<el-radio-group v-model="remotoDataSetRadio">
                <el-radio
                  v-for="(item, index) in localDataSets"
                  :key="index"
                  :label="item.value">
                  <span
                    v-on:mouseover="over($event, index)"
                    :id="'remote' + index">{{ item.label }}</span>
                    //先设置 样式display:none，不显示
                  <div class="detailRemote" style="display: none">
                    <div
                      v-for="(remote, i) in romoteLabels"
                      :key="'remote' + i"
                      class="detailList">
                      <span class="left">{{ remote.key }}</span>
                      <span class="right">{{ remote.value }}</span>
                    </div>
                  </div>
                </el-radio>
              </el-radio-group>

over(row, index) {
     //悬浮点击事件
      document.getElementById(row.target.id).click();
      //row.target.nextElementSibling.className 是该悬浮单选按钮的兄弟节点
      //document.getElementsByClassName() 通过类名来获取元素
        var detailArr = document.getElementsByClassName(row.target.nextElementSibling.className);
        //遍历获取的数组，如果有显示的将他的display:none  设为不显示
        for (var i = 0; i < detailArr.length; i++) {
          if (detailArr[i].style.display == "block") {
            detailArr[i].style.display = "none";
            //找到元素，结束循环
            break;
          }
          //index 是传入的单选框索引，将detailArr 索引元素的样式设置为显示
        detailArr[index].style.display = "block";
      }
    },

效果：
在这里插入图片描述