位置: 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"> <!-- @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>总结

学习之路 永无止步 记录当下,保持一颗向上的心态~!

本文链接地址:https://www.jiuchutong.com/zhishi/289753.html 转载请保留说明!

上一篇:Calanques de Piana岩层上的一个心形洞,法国科西嘉岛 (© joningall/Getty Images)

下一篇:阳光照耀下的火山岩山脊,冰岛埃亚菲亚德拉冰盖 (© Erlend Haarberg/Minden Pictures)(阳光照耀下的人)

  • 实物折扣的增值税
  • 高新技术企业加计抵减
  • 新冠肺炎捐赠账务处理
  • 国企的注册资本也很少吗
  • 现金流量表中的销售商品提供劳务收到的现金
  • 供应商属于应收账款吗
  • 发票没交税可以退税吗
  • 在电子税务里怎么查以前年度亏损数据
  • 自产农产品增值税申报表填10行吗
  • 税务登记法人变更后多久生效
  • 出口酒类产品需要什么
  • 高薪技术企业研发人员人数
  • 个人投资款怎么入账
  • 资本公积金转增股本所获取的收益属于
  • 政府补助计入资本公积是老准则吗
  • 正常的成本利润是多少
  • 企业所得税季度申报填写示例
  • 携税宝服务费可以入办公费吗
  • 开票信息没有电话号码可以吗
  • 怎么通过合并弥补亏损,使得利益最大化?
  • 支票入账怎么填写
  • 增值税有没有定额抵扣
  • 提供服务的发票可以抵扣税款吗?
  • 工厂新增项目需要立项、环境评价
  • 附加税要先计提再支付吗
  • 非营利组织一般纳税人会计准则
  • php解析xml文件
  • word更改单页背景颜色
  • 桌面级cpu天梯图快科技
  • 消防设施费用怎么入账
  • php unset()
  • 不征税收入用于支出所形成的费用是什么意思
  • 最强笔记本2021
  • 发票怎么保管不会坏
  • fastadmin 插件开发
  • css静态网页制作
  • php解析xml数据
  • php与ajax交互
  • 常见反爬策略
  • php如何实现
  • 完美破费是什么意思
  • 当月未付款算在次月吗
  • python的基本风格
  • mongodb skip数据量大
  • 登记注册车辆登记英语
  • 财务会计该如何处理客户以个人账号转款到公司公账?
  • 微信支付算库存商品吗
  • 残疾人保障金汇算清缴的处理
  • mysql数据库sid
  • 水利建设基金应税项是什么
  • 企业购买了数千亿资产
  • 资本公积 转增
  • 如何核算小企业成本
  • 销售旧固定资产开票编码
  • 个人所得税不需要汇算清缴
  • 收到银行手续费已做后期收到发票怎么做
  • 应收分保未到期责任准备金是什么科目
  • 固定资产原价和账面价值的区别
  • 售后回租会计准则
  • 出差发生的招待费计入差旅费吗
  • 员工安全培训费可以抵扣增值税吗
  • 企业取得的财政拨款
  • 租赁合同的印花税的计税依据
  • 发票报销流程和条件
  • 代扣代缴增值税税率
  • 年终建账于年初建账,在录入期初余额时有什么不一样?
  • 捐赠支出表怎么填
  • linux clk
  • linux怎么管理进程
  • win10显示win8
  • sdl_init
  • win7 64位旗舰版电脑鼠标如何才能设置成左手操作?设置鼠标为左手操作的方法
  • win8怎么设置开机启动项
  • win8怎么改成win10
  • 将jquery.qqFace.js表情转换成微信的字符码
  • 剑指offter
  • 黑客需要学哪些
  • python多线程例子
  • 如何让listview提高效率
  • 医生算是公务员吗?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设