基于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 相关文章推荐
JS中的构造函数详细解析
Mar 10 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
js实现每日签到功能
Nov 29 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 Javascript
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
Apache2 httpd.conf 中文版
2006/11/17 PHP
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
php+js实现异步图片上传实例分享
2014/06/02 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
JavaScript 事件的一些重要说明
2009/10/25 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
Python3.5 创建文件的简单实例
2018/04/26 Python
python实现可变变量名方法详解
2019/07/01 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
校长岗位职责
2013/11/26 职场文书
教育科研先进个人材料
2014/01/26 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
好媳妇事迹材料
2014/12/24 职场文书
采购员岗位职责
2015/02/03 职场文书