Vue实现鼠标悬浮隐藏与显示图片效果 @mouseenter 和 @mouseleave事件
前言
前端vue 有个功能是鼠标移动到指定item上显示出来一个编辑和删除的图标
鼠标悬停在列表那么需要有悬浮显示的列表编辑和删除icon
文字不好描述,因为是web端录屏也比较麻烦 这里用截图说明
图片说明
功能实现
之前没做过这种效果,问了一下我的组长-豪哥
他告诉我很简单,利用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] = trueleftIconId.value = item.idconsole.log('mouseenter')
}const mouseleave = (index: number, item: SymptomList) => {leftIcon.inputAry[index] = falseleftIconId.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 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" <!-- 这里是item尾部的2个图标 编辑和删除图标 我们做了2个判断 第一是==true时,我们才把图标显示出来第二:将当前点击的id记录 -->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<!-- 1、进入元素 事件会叠加 -->@mouseover="mouseover"<!-- 2、进入元素 事件不叠加 -->@mouseenter="mouseenter"<!-- 3、移动 -->@mousemove="mousemove"<!-- 4、离开元素 事件会叠加-->@mouseout="mouseout"<!-- 5、离开元素 事件不叠加 -->@mouseleave="mouseleave"<!-- 6、鼠标在元素上 按下 -->@mousedown="mousedown"<!-- 7、鼠标在元素上 抬起 -->@mouseup="mouseup"></div>
总结
学习之路 永无止步
记录当下,保持一颗向上的心态~!
Vue实现鼠标悬浮隐藏与显示图片效果 @mouseenter 和 @mouseleave事件相关推荐
- html鼠标悬浮更换图片,Vue.js鼠标悬浮更换图片功能
最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现. 首先将所有的选中后图片都覆盖到没选中图片上 c ...
- vue控制元素的隐藏和显示
vue动态控制元素的隐藏和显示 <template><div @click="clickbj(i)"> //i 为父元素 for 循环的 index点击&l ...
- 鼠标悬停文字上显示图片
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- html鼠标经过盒子延时显示,jQuery实现鼠标滑过延时显示的效果
WEB开发人员有时候经常用到延时操作的用户交互事件,比如聚美优品网站首页的产品展示,当鼠标移入产品1秒钟后,会显示产品的详情,而不希望用户的鼠标指针刚刚移入元素就显示详情,对于不希望显示详情的用户来说 ...
- 将文字置于图片之上,防止鼠标频繁交替触发mouseenter和mouseleave事件
问题描述: 使用标准文档流进行布局,鼠标会频繁触发 mouseenter 和 mouseleave 事件,无法正常修改 spsan 的位置. 该问题需将文字(即 li)置于图片(即 span)之上,防 ...
- vue实现鼠标悬浮 显示全部内容
在做vue项目中 常常会遇到内容太长 显示不全 这就用到鼠标悬浮效果了 使用 (element-ui) <el-tooltip :content="全部内容" placeme ...
- echarts y轴文本过长,设置超出隐藏,然后显示省略号,并且鼠标悬浮上之后显示全部
Echarts 标签中文本内容太长的时候怎么办 ? 看如下两块有分别说明: 具体代码如下: <!--引入js文件--> <script src="${ctx}/tiles/ ...
- 鼠标悬浮导航栏显示下拉菜单
在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法,html和css样式就不贴代码了. 1.原生js <script>// window.onload = function(){// 获取需要 ...
- echarts 饼图取消legend图例的点击事件,保留鼠标悬浮legend上显示tooltie提示信息的事件
echarts 饼图 因为我在饼图渲染数据的时候对一些数据较小的label和labelLine进行了隐藏,进行了数据的二次处理,所以legend鼠标悬浮显示出tooltie是我所需要的而点击事件,会关 ...
最新文章
- Ubuntu16.04LTS安装ROS Kinetic
- java is开头版本解决_eclipse指定jdk版本启动,解决Version XXXX of the JVM is not
- Hive安装报错:Unable to instantiate org.apache.hadoop.hive.ql.metadata.SessionHiveMetaStoreClient的解决办法
- JDK 伪异步编程(线程池)
- 在Vue中使用JSX,很easy的
- C++实现演讲比赛小项目
- ORACLE忘记用户名密码
- html5游戏开发教程实战 五子棋 四子棋 围棋 翻转棋四种对弈游戏,仅仅100行代码
- 合并pdf文件-批量打印
- 论文写作笔记7 大纲outline写作方法
- 参数估计(点估计和区间估计)
- LaTeX报错解决办法:arithmetic: number too big ! Dimension too large.
- SQL SERVER 软件和安装步骤
- 计算机一级ps考级知识,Photoshop等级考试一级大纲
- isolatedModules‘ because it is considered a global script file. Add an import, export, or an empty
- NLP(自然语言处理)
- 计算机辅助设计在环境工程中的应用,原创:试论计算机辅助设计在环境工程中的应用原稿...
- Java同步器之AbstractOwnableSynchronizer详解
- 中国科学院大学计算机学院夏令营,中国科学院大学计算机网络信息中心2019年推免夏令营通知...
- 突发:陆奇出任拼多多技术顾问委员会负责人