基于vue中对鼠标划过事件的处理方式详解


Posted in Javascript onAugust 22, 2018

鼠标事件进行监听

需求中,在一个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="...">
   </div>
   </div>
  </template>
 </el-table-column>
 </el-table>
</template>

...
changeMask(index) {
 let vm = this;
 let mask = vm.$refs['mask' + index];

 if(mask.style.display == 'none') {
 mask.style.display = 'block';
 }else {
 mask.style.display = 'none';
 }
}

最后在查看结果中发现,在划过的时候是会触发鼠标事件,但是会出现闪动的清空,当鼠标一直放在该单元格上的时候,遮罩层也会消失和出现反复切换。为缓解这种情况,还对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中对鼠标划过事件的处理方式详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
js 获取Listbox选择的值的代码
Apr 15 Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
js登录弹出层特效
Mar 07 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 #Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 #Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 #Javascript
element-ui 设置菜单栏展开的方法
Aug 22 #Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 #Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 #Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 #Javascript
You might like
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
简洁的十分钟Python入门教程
2015/04/03 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
你常见到的runtime exception
2016/09/05 面试题
设计模式的基本要素是什么
2014/04/21 面试题
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
初中数学教学反思
2014/01/16 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
超市总经理岗位职责
2014/02/02 职场文书
安全协议书范本
2014/04/21 职场文书
平安建设工作方案
2014/06/02 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
单位作风建设自查报告
2014/10/23 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏