基于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 相关文章推荐
JavaScript设置FieldSet展开与收缩
May 15 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 Javascript
微信小程序实现多张图片上传功能
Nov 18 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
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
php实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
Document对象内容集合(比较全)
2010/09/06 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
ant design实现圈选功能
2019/12/17 Javascript
python中self原理实例分析
2015/04/30 Python
Python ftp上传文件
2016/02/13 Python
python添加模块搜索路径方法
2017/09/11 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
公司廉洁自律承诺书
2014/03/27 职场文书
党日活动总结
2014/05/07 职场文书
质量负责人任命书
2014/06/06 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
申报材料格式
2014/12/30 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
国王的演讲观后感
2015/06/03 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android