频道导航

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

2019-01-07 Vue 前端之家

前端之家收集整理的这篇文章主要介绍了基于vue中对鼠标划过事件的处理方式详解，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_4040@<span style="background-color: #ccffcc">

鼠标事件进行监听

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

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

<div class="jb51code">
<pre class="brush:js;">

...
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';
}
}

@H_404_0@最后在查看结果中发现，在划过的时候是会触发鼠标事件，但是会出现闪动的清空，当鼠标一直放在该单元格上的时候，遮罩层也会消失和出现反复切换。为缓解这种情况，还对changeMask中的显示和隐藏进行setTimeout延时，结果并不理想，不推荐这样使用。

@H_404_0@CSS方式实现

@H_404_0@这种方法，只需要保留上面代码中的主体部分，不需要ref和mouse事件这些，主要是通过opacity去控制遮罩层的显示和隐藏的。具体的样式代码如下：

文字显示在该层的最中间 left: 0; right: 0; top: 0; bottom: 0; //透明度为0，则就是不可见 opacity: 0; } &:hover { .img-mask { opacity: 1; } } }

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

@H_404_0@table中动态ref

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

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

@H_404_0@

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

@H_404_0@如下所示：

>

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

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

vue vue vue 鼠标划过

上一篇：vue鼠标移入添加class样式,鼠标移出下一篇：vuejs选中当前样式active的实例

猜你在找的Vue相关文章

elementui的el-tree第一次加载无法展开和选中的问题

问题现象 elmentui的el-tree数据加载问题，导致第一次加载选中当前节点和高亮当前节点没有...

作者：前端之家时间：2021-02-17

VSCODE打开一个文件，另一个文件就关闭的问题的解决方法

因为刚打开文件，vscode默认是预览状态，如果编辑过之后，就不会有这个问题。可以通过双击...

作者：前端之家时间：2021-02-17

一文带你学会国产加密算法SM4的vue实现方案

前言上篇文章我们介绍了国产SM4加密算法的后端java实现方案。没有看过的小伙伴可以看一下...

作者：前端之家时间：2021-02-17

解决vue报错：Module build failed (from ./node_modules/_eslint-loader@2.2.1@eslint-loader/index.js): TypeError: Cannot read property 'range' of null

在项目中引入动态路由时报错写法: 报错: Module build failed (from ./node_modules/_esl...

作者：前端之家时间：2021-02-17

vue中解决Uncaught ReferenceError: regeneratorRuntime is not defined问题

问题产生在使用babel编译es6时，遇到报错Uncaught ReferenceError: regeneratorRuntime i...

作者：前端之家时间：2021-02-17

element-UI中手动调用table排序

&lt;el-table :data=&quot;tableData&quot; &quot;width...

作者：前端之家时间：2021-02-17

Vue双向绑定原理及其实现

在之前面试的时候被面试官问到是否了解Vue双向绑定的原理，其实自己之前看过双向绑定的原理...

作者：前端之家时间：2021-01-10

Vue事件修饰符详解

整体学习Vue时看到Vue文档中有事件修饰符的描述，但是看了之后并没有理解是什么意思，于是...

作者：前端之家时间：2021-01-10

Vue-router插件使用

单页面原理 Vue是单页面开发，即页面不刷新。页面不刷新，而又要根据用户选择完成内容的更...

作者：前端之家时间：2021-01-01

Vue 分支循环

v-for 通过v-for进行循环，不光可以拿到元素本身，也可以拿到索引值。如果数据是对象类型...

作者：前端之家时间：2021-01-01

最新文章