基于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 相关文章推荐
jquery datepicker参数介绍和示例
Apr 15 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
jquery实现倒计时功能
Dec 28 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
jQuery plugin animsition使用小结
Sep 14 jQuery
详解如何使用webpack打包JS
Jun 21 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 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
一个SQL管理员的web接口
2006/10/09 PHP
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
JavaScript 模拟用户单击事件
2009/12/31 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
解决vue props 拿不到值的问题
2018/09/11 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
pygame播放音乐的方法
2015/05/19 Python
python PIL模块与随机生成中文验证码
2016/02/27 Python
python操作redis方法总结
2018/06/06 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
python支持多继承吗
2020/06/19 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
九年级化学教学反思
2016/02/22 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
浅析Python中的随机采样和概率分布
2021/12/06 Python
MySQL数据库查询之多表查询总结
2022/08/05 MySQL