基于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 控制CSS样式表
Aug 20 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
js制作简易年历完整实例
Jan 28 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
原生JS实现的轮播图功能详解
Aug 06 Javascript
vue实现循环切换动画
Oct 17 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 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
笑谈配置,使用Smarty技术
2007/01/04 PHP
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
php中一个完整表单处理实现代码
2011/11/10 PHP
zend framework配置操作数据库实例分析
2012/12/06 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
浅谈js中的bind
2019/03/18 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
Python Paramiko模块的使用实际案例
2018/02/01 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
python raise的基本使用
2020/09/10 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
远程调用的原理
2014/07/05 面试题
vue+django实现下载文件的示例
2021/03/24 Vue.js
电教室标语
2014/06/20 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
创业计划书之废品回收
2019/09/26 职场文书
Vue+Flask实现图片传输功能
2022/04/01 Vue.js