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

鼠标事件进行监听

需求中，在一个table(组件)表中，对于其中一列(该列为图片列)，当鼠标划过该列的某个单元格子(图片)时，需要展示出该单元格子对应的遮罩层

翻阅了一些博客，发现好多都提到了mouse事件，如mouSEOver、mouSEOut、mouseenter、mouseleave，在之后我自己也通过这种方法进行了尝试。

SEOver="changeMask(props.rowIndex)" @mouSEOut="changeMask(props.rowIndex)">

...

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去控制遮罩层的显示和隐藏的。具体的样式代码如下：

这种方法达到了预期的效果，体验也很好，推荐使用。

table中动态ref

首先，这部分并不是针对遮罩层显示隐藏的，而是处理表格中某一列或者很多单元格添加ref的。这个其实在第一种方法中就已经也出来了，现在做下总结。

:ref="'mask' + props.rowIndex"这种方法对例如表格这样一列中的每个单元格都对应着一个附加的东西，而这些东西的位置又是不同的，可以实现对每个单元格进行ref绑定，在事件处理函数中，通过传递props.rowIndex得到下标，最终通过this.$ref['mask' + props.rowIndex]得到对应的元素，然后对其css进行相关控制(只是举例)。

拓展知识：vue鼠标划过移入移出触发函数介绍

如下所示：

SEOver="changeActive($event)" v-on:mouSEOut="removeActive($event)">

以上这篇基于vue中对鼠标划过事件的处理方式详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。

vue划入划出事件_基于vue中对鼠标划过事件的处理方式详解相关推荐

python中with open写csv文件_Python中的CSV文件使用with语句的方式详解
是否可以直接使用with语句与CSV文件?能够做这样的事情似乎很自然: import csv with csv.reader(open("myfile.csv")) as read ...
python2.7除法_对python中的float除法和整除法的实例详解
从python2.2开始,便有两种除法运算符:"/"."//".两者最大区别在: python2.2前的版本和python2.2以后3.0以前的版本的默认情况下 ...
python反向缩进_在Pycharm中对代码进行注释和缩进的方法详解
在Pycharm中对代码进行注释和缩进的方法详解一.注释 1. #单行注释 2. """ 多行注释 """ 3. pycharm多行注释快 ...
python 读取图片转换为一维向量_对Python中一维向量和一维向量转置相乘的方法详解...
对Python中一维向量和一维向量转置相乘的方法详解在Python中有时会碰到需要一个一维列向量(n*1)与另一个一维列向量(n*1)的转置(1*n)相乘,得到一个n*n的矩阵的情况.但是在pyth ...
mysql简易购物车系统_基于PHP+Mysql简单实现了图书购物车系统的实例详解
基于PHP+Mysql简单实现了图书购物车系统的实例详解,购物车,这是,页面,简单,图书基于PHP+Mysql简单实现了图书购物车系统的实例详解易采站长站,站长之家为您整理了基于PHP+Mysql ...
args在python中什么意思_对python中的*args与**kwgs的含义与作用详解
在定义函数的时候参数通常会使用 *args与**kwgs,形参与实参的区别不再赘述,我们来解释一下这两个的作用. *args是非关键字参数,用于元组,**kw是关键字参数例如下面的代码 def fo ...
python读二进制格点雷达基数据_对numpy中二进制格式的数据存储与读取方法详解...
使用save可以实现对numpy数据的磁盘存储,存储的方式是二进制.查看使用说明,说明专门提到了是未经压缩的二进制形式.存储后的数据可以进行加载或者读取,通过使用load方法. In [81]:np. ...
python six模块详解_对python中的six.moves模块的下载函数urlretrieve详解
实验环境:windows 7,anaconda 3(python 3.5),tensorflow(gpu/cpu) 函数介绍:所用函数为six.moves下的urllib中的函数,调用如下urllib ...
mysql 删除数据表中数据_Mysql-删除数据表-三种方式详解
Mysql 删除数据表的三种方式详解用法: 1.当你不再需要该表时, 用 drop; 2.当你仍要保留该表,但要删除所有记录时, 用 truncate; 3.当你要删除部分记录或者有可能会后悔的话, ...

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

vue划入划出事件_基于vue中对鼠标划过事件的处理方式详解相关推荐

最新文章

热门文章