vue实现鼠标划入划出判断是否显示内容

思念诉与山风听

已于 2023-07-04 11:44:32 修改

阅读量1k

点赞数 2

文章标签： javascript Powered by 金山文档

于 2023-02-27 15:56:08 首次发布

本文链接：https://blog.csdn.net/ssk777888/article/details/129242821

版权

如图所示我想实现当鼠标划入时右上角的设置图标显示，鼠标移出设置图标在隐藏，可以通过vue的@mouseenter和@mouseleave事件来实现

<!-- 
      这个@mouseenter和@mouseleave需要放在父级盒子内
      首先需要在data里面定义一个rightTopIconIndex=-1
      触发@mouseenter事件时rightTopIconIndex等于当前划过的这个模块的下标
      触发@mouseleave事件时在给rightTopIconIndex赋值为-1
      然后在要显示的设置图标的盒子内判断rightTopIconIndex是否等于当前父盒子的下标
    -->
    <div
      v-for="(item, index) in applicationList"
      :key="index"
      @mouseenter="rightTopIconIndex = index"
      @mouseleave="rightTopIconIndex = -1"
    >
      <div class="rightTopIcon" v-show="rightTopIconIndex == index">
        <i class="el-icon-s-tools"></i>
      </div>
    </div>