欢迎来到站圈网!

php远程媒体七牛node摇摇

投稿中心

JavaScript

当前位置: 主页 > Web前端 > JavaScript

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

时间:2022-11-22|作者:吕氏春秋i|点击:

目录

前言

前端vue 有个功能是鼠标移动到指定item上显示出来一个编辑和删除的图标

鼠标悬停在列表那么需要有悬浮显示的列表编辑和删除icon

文字不好描述,因为是web端录屏也比较麻烦 这里用截图说明

图片说明

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

功能实现

之前没做过这种效果,问了一下我的组长-豪哥

他告诉我很简单,利用vue的@mouseenter 和 @mouseleave事件就可以完美解决

本着这个思路,我去寻求答案,找了很多有关知识,自己也慢慢摸索 完成了该效果

下面说下实现 附代码

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和当前点击的标记位

{{ item.name }}
v-if="leftIcon.inputAry[index] == true && item.id == leftIconId">

mouseover 和 mouseenter 的区别

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

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

hover 事件调用顺序:

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

用div来演示所有事件方法

 
@mouseover="mouseover" @mouseenter="mouseenter" @mousemove="mousemove" @mouseout="mouseout" @mouseleave="mouseleave" @mousedown="mousedown" @mouseup="mouseup" >

总结

到此这篇关于Vue实现鼠标悬浮隐藏与显示图片效果@mouseenter和@mouseleave事件的文章就介绍到这了,更多相关Vue鼠标悬浮隐藏与显示图片内容请搜索站圈网以前的文章或继续浏览下面的相关文章希望大家以后多多支持站圈网!

版权声明:本文内容由小编收集网络,均来自网络用户自发贡献,版权归原作者所有,Web前端、电脑编程学习类网站不拥有其著作权,亦不承担相应法律责任。具体规则请查看《Web前端、电脑编程学习类网站用户服务协议》和《Web前端、电脑编程学习类网站知识产权保护指引》。如果您发现本站中有涉嫌抄袭的内容,填写联系本站管理员,一经查实,管理员将立刻删除涉嫌侵权内容。

上一篇:vue中使用/deep/失效的解决方法

下一篇:Vue.config.productionTip = fal

本文标题:Vue实现鼠标悬浮隐藏与显示图片效果@mouseenter和@mouseleave事件详解

本文地址:https://www.zhano.cn/JavaScript/67920.html

AD300

广告投放 | 联系我们 | 版权申明 | SiteMap

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:15234109 | 邮箱:15234109#qq.com(#换成@)

Copyright © 2019-2022 豫ICP备19001789号