Vue如何实现鼠标悬浮隐藏与显示图片效果

这篇“Vue如何实现鼠标悬浮隐藏与显示图片效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue如何实现鼠标悬浮隐藏与显示图片效果”文章吧。

功能实现

利用vue的@mouseenter 和 @mouseleave事件就可以完美解决

因为是在列表中完成的某个item的图标隐藏与显示

这个时候我们需要合index绑定 并且和改条目的id绑定(用来互斥)

这里需要注意一点

@mouseenter 和 @mouseleave 方法必须放到父类的div中 才能起效果

我们需要

在js中把id绑定 把index设置值，默认为false 既不显示

下面js代码中做了id绑定和给数组的标记赋值的关系

const leftIcon = Reactive({    inputAry: [] as boolean[]})const leftIconId = ref()const mouseenter = (index: number, item: SymptomList) => {    leftIcon.inputAry[index] = true    leftIconId.value = item.id    console.log('mouseenter')}const mouseleave = (index: number, item: SymptomList) => {    leftIcon.inputAry[index] = false    leftIconId.value = item.id;    console.log('mouseleave')}

我们在html中把@mouseenter 和 @mouseleave事件添加
然后再指定的div标签内 做隐藏与显示的判断 还是根据id和当前点击的标记位

<div v-for="(item, index) in symptomList" class="item">            <div class="left">             <!--  @mouseenter="mouseenter(index,item)"              在这里绑定index和item数据类(这里有我们要的数据id)-->                <div class="left-div" @mouseenter="mouseenter(index,item)"                 @mouseleave="mouseleave(index,item)">                    <div v-if="editShow.inputAry[index] == true && item.id == diseaseId ">                        <a-input class="input" v-model:value="inputContent"                         autofocus="autofocus" :max-length="10"                            @change="changeInput()" />                        <a-button class="commit" @click="handleInputCommit(item,index)">                            <template #icon>                                <check-outlined  />                            </template>                        </a-button>                        <a-button class="cancel" @click="handleInputCancel(index)">                            <template #icon>                                <close-outlined />                            </template>                        </a-button>                    </div>                    <div v-else >                        <div>{{ item.name }}</div>                        <div class="right-icon"                           <!-- 这里是item尾部的2个图标 编辑和删除图标 我们做了2个判断                           第一是==true时，我们才把图标显示出来                          第二：将当前点击的id记录 -->                        v-if="leftIcon.inputAry[index] == true && item.id == leftIconId">                            <a-button                                 @click="handleClickEdit(item,index)" type="link">                                <template #icon>                                    <edit-outlined />                                </template>                            </a-button>                            <a-button style="margin-left: 5px;                             color:#676E7C; width: 13.7px ; height:13.7px;"                                @click="handleClickDel(item,index)" type="link">                                <template #icon>                                    <delete-outlined />                                </template>                            </a-button>                        </div>                    </div>                </div>            </div>

mouseover 和 mouseenter 的区别

mouseover：当鼠标移入元素或其子元素都会触发事件，有一个重复触发，事件叠加过程。对应的移除事件是 mouseout

mouseenter:当鼠标移入元素本身（不包含元素的子元素）会触发事件，事件不会叠加。对应的移除事件是 mouseleave

hover 事件调用顺序:

mouseover -> mouseenter -> mousemove(hover进去之后移动会触发) -> mouseout -> mouseleave

用div来演示所有事件方法

 <div     <!-- 1、进入元素 事件会叠加 -->    @mouseover="mouseover"     <!-- 2、进入元素 事件不叠加 -->    @mouseenter="mouseenter"     <!-- 3、移动 -->    @mousemove="mousemove"     <!-- 4、离开元素 事件会叠加-->    @mouseout="mouseout"     <!-- 5、离开元素 事件不叠加 -->    @mouseleave="mouseleave"     <!-- 6、鼠标在元素上 按下 -->    @mousedown="mousedown"    <!-- 7、鼠标在元素上 抬起 -->    @mouseup="mouseup"  >  </div>

以上就是关于“Vue如何实现鼠标悬浮隐藏与显示图片效果”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。