鼠标事件进行监听
需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层
翻阅了一些博客,发现好多都提到了mouse事件,如mouseover、mouseout、mouseenter、mouseleave,在之后我自己也通过这种方法进行了尝试。
<template> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column prop="pic" label="图片" width="180"> <template slot-scope="scope"> <div slot="wrapper" class="name-wrapper"> <div class="img-mask" @click="toShowDialog(props.row)" :ref="'mask' + props.rowIndex">文字</div> <div @mouseover="changeMask(props.rowIndex)" @mouseout="changeMask(props.rowIndex)"> <img src="/UploadFiles/2021-04-02/...">最后在查看结果中发现,在划过的时候是会触发鼠标事件,但是会出现闪动的清空,当鼠标一直放在该单元格上的时候,遮罩层也会消失和出现反复切换。为缓解这种情况,还对changeMask中的显示和隐藏进行setTimeout延时,结果并不理想,不推荐这样使用。
CSS方式实现
这种方法,只需要保留上面代码中的主体部分,不需要ref和mouse事件这些,主要是通过opacity去控制遮罩层的显示和隐藏的。具体的样式代码如下:
.wrapper { position: relative; .img-mask { position: absolute; background: rgba(0, 0, 0, 0.5); z-index: 10; //设置left、right、top、bottom的原因是使得遮罩层上的文字显示在该层的最中间 left: 0; right: 0; top: 0; bottom: 0; //透明度为0,则就是不可见 opacity: 0; } &:hover { .img-mask { opacity: 1; } } }这种方法达到了预期的效果,体验也很好,推荐使用。
table中动态ref
首先,这部分并不是针对遮罩层显示隐藏的,而是处理表格中某一列或者很多单元格添加ref的。这个其实在第一种方法中就已经也出来了,现在做下总结。
:ref="'mask' + props.rowIndex"这种方法对例如表格这样一列中的每个单元格都对应着一个附加的东西,而这些东西的位置又是不同的,可以实现对每个单元格进行ref绑定,在事件处理函数中,通过传递props.rowIndex得到下标,最终通过this.$ref['mask' + props.rowIndex]得到对应的元素,然后对其css进行相关控制(只是举例)。
拓展知识:vue鼠标划过移入移出触发函数介绍
如下所示:
<ul <li class="" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)"></li> </ul>methods:{ // 鼠标移入加入class changeActive($event){ $event.currentTarget.className="active"; }, removeActive($event){ $event.currentTarget.className=""; } }以上这篇基于vue中对鼠标划过事件的处理方式详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 五月天.2007-为爱而生【滚石】【WAV+CUE】
- 群星1993-巨石1994送旧迎新[巨石][WAV+CUE]
- 群星1995-风中奇缘电影原声带(国际中文版)[迪斯尼][WAV+CUE]
- 爵士女伶(1)《JazzVocalsVol.1》[WAV+CUE]
- 大嘴巴.2007-大嘴巴【环球】【FLAC分轨】
- 群星.1991-飞鹰群星龙虎榜金曲收集版2辑【飞鹰】【WAV+CUE】
- 张蓉蓉.2018-为情所害【豪记】【WAV+CUE】
- 张信哲《宽容》[WAV分轨][467M]
- 群星《原音精选 香港高级视听展20周年纪念 SACD》[ISO][1.1G]
- 林忆莲《精选16首》[DFF][2.2G]
- 李小沛-粉墨是梦[瑞鸣限量版]2023年12月28日SACDISO
- 三盲鼠《无敌超级录音至尊精选集第一集第二集第三集》[WAV+CUE]
- 张可儿《闻故乡》纯银[低速原抓WAV+CUE]
- 叶佩雯.2000-Amazing.Grace【英皇娱乐】【WAV+CUE】
- 周治平.1996-那一個春天浪漫夜晚Live(96年演唱会纪实)【宝丽金】【WAV+CUE】