位置: IT常识 - 正文

Vue实现鼠标悬浮隐藏与显示图片效果 @mouseenter 和 @mouseleave事件(vue实现鼠标悬浮显示全部内容)

编辑：rootadmin

Vue实现鼠标悬浮隐藏与显示图片效果 @mouseenter 和 @mouseleave事件前言

推荐整理分享Vue实现鼠标悬浮隐藏与显示图片效果 @mouseenter 和 @mouseleave事件(vue实现鼠标悬浮显示全部内容)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue实现鼠标悬浮显示全部内容,vue鼠标悬浮切换图片,vue鼠标悬浮改变icon图标颜色,vue鼠标悬浮显示信息,vue鼠标悬浮文字上显示图片,vue鼠标悬浮切换图片,vue鼠标悬浮文字上显示图片,vue鼠标悬浮切换图片,内容如对您有帮助，希望把文章链接给更多的朋友！

前端vue 有个功能是鼠标移动到指定item上显示出来一个编辑和删除的图标鼠标悬停在列表那么需要有悬浮显示的列表编辑和删除icon 文字不好描述，因为是web端录屏也比较麻烦这里用截图说明

图片说明

功能实现

之前没做过这种效果，问了一下我的组长-豪哥他告诉我很简单，利用vue的@mouseenter 和 @mouseleave事件就可以完美解决本着这个思路，我去寻求答案，找了很多有关知识，自己也慢慢摸索完成了该效果

下面说下实现附代码

因为是在列表中完成的某个item的图标隐藏与显示这个时候我们需要合index绑定并且和改条目的id绑定(用来互斥)

这里需要注意一点

Vue实现鼠标悬浮隐藏与显示图片效果 @mouseenter 和 @mouseleave事件(vue实现鼠标悬浮显示全部内容)

@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">  <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 style="color: #ffffff" /> </template> </a-button> <a-button class="cancel" @click="handleInputCancel(index)"> <template #icon> <close-outlined /> </template> </a-button> </div> <div v-else style="display: flex;"> <div>{{ item.name }}</div> <div class="right-icon"  v-if="leftIcon.inputAry[index] == true && item.id == leftIconId"> <a-button style="color:#676E7C; width: 13.7px ; height: 13.7px;" @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  @mouseover="mouseover"  @mouseenter="mouseenter"  @mousemove="mousemove"  @mouseout="mouseout"  @mouseleave="mouseleave"  @mousedown="mousedown"  @mouseup="mouseup" > </div>总结

Vue实现鼠标悬浮隐藏与显示图片效果 @mouseenter 和 @mouseleave事件(vue实现鼠标悬浮 显示全部内容)

Vue实现鼠标悬浮隐藏与显示图片效果 @mouseenter 和 @mouseleave事件(vue实现鼠标悬浮显示全部内容)