vue.js hover事件模拟

一、写在前面的废话
最近写毕设，前端用的 vue+element-ui，想实现hover()事件效果，但是怎么都没找到可以直接调用的，然后折腾了引入jquery，好一通折腾，千辛万苦引入成功，不再报 $ 未定义之后，心里一阵狂喜，想着就要实现了呢，然而，结果却是。。。what? 居然不执行！什么情况？不知道。。。哦，对，给出我是怎么调用的，万一是我用错了，错怪他了呢

$("td").hover (console.log('1')function () {console.log('2')$(this).addClass("hover")},function () {console.log('3')$(this).removeClass("hover")}
);

恩，基本上就是酱紫用的，打印结果是 1 ,也就是说，2 和 3 一个也没执行。。。。我的内心是崩溃的。。。然后放弃这个思路，放弃了 jquery ，老老实实用 vue 来实现吧

二、问题描述
我现在的需求是：写了一个靠左边的导航菜单，不激活的时候只显示每个菜单的小图标，激活的时候想要在小图标的右边显示图标对应的文字，菜单可以点开展示子菜单，恩，就是酱紫

三、问题未解决的效果
1）先看看他安静的像个美少女一样的图片

恩，对，未激活状态下，她就这么安静的躺在那
2）然后再看一张激活状态下不忍直视的效果图

就是酱紫，hover了好久都没成功，放弃。。。

四、问题解决

（1）先看效果图
1）安静的时候跟上面的一样
2）激活并且鼠标点开一个子菜单，啊，对这张只是把鼠标移到了有背景色的子菜单上，忘了点了，所以被选中的蓝色字还在默认菜单项上 =_=

3）选中一个子菜单并且未关闭的状态下（鼠标移出菜单）

4）关闭子菜单并且移出鼠标之后他就会继续安静的躺着了

（2）实现（只留下源代码里与此相关的重点部分）

hover用不了，但是可以把hover拆开成一进一出，这样就可以调用 vue 提供的方法了，就是麻烦了一点

1）HTML（用的element-ui）
① 用@（v-on的缩写）绑定事件监听器官方文档
② :class 绑定 HTML 与 class ，也就是说，show 和 hide 这两个类是否被添加是根据 showText 和 hideText 两个属性值来决定的， true 则添加，false 则不添加官方文档

<div @mouseover="overShow" @mouseout="outHide"> <el-menu><el-submenu index="checkbatch"><template slot="title"><i class="el-icon-document"></i><span :class="{show:showText,hide:hideText}">批次信息</span></template><el-menu-item>全部批次信息查看</el-menu-item><el-menu-item>接受中批次信息查看</el-menu-item><el-menu-item>审核中批次信息查看</el-menu-item><el-menu-item>已完成批次信息查看</el-menu-item></el-submenu></el-menu></div>

2）js

 data () {return {showText: false,hideText: true}},methods: {overShow () {this.showText = !this.showTextthis.hideText = !this.hideText},outHide () {this.showText = !this.showTextthis.hideText = !this.hideText}}

3）css

.show{display: block;
}
.hide{display: none;
}

4）补充说明：
在我这里这么写之后，小图标和对应的汉字相对位置不对，但是用 css 的 display 调一调相对位置就可以了

好啦~~~折磨我这么久的hover事件模拟就这样解决啦，希望可以帮到有同样需求的小伙伴

vue.js hover事件模拟相关推荐

Vue的hover事件
Vue的hover事件因为Vue刚开始使用不久,所以对于Vue的知识点都不知道,因此在这记录一下. 需求:对于所遍历的数据都加上一个hover事件,当鼠标放在某条数据上时,做一些操作,当鼠标移开时, ...
Vue.js笔记------事件
一.事件与事件流 1.事件与事件流 [事件] JavaScript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性.常见的有加载事件.鼠标事件. [事件流] 由于 ...
Vue.js 自定义事件
事件名不同于组件和 prop,事件名不存在任何自动化的大小写转换.而是触发的事件名需要完全匹配监听这个事件所用的名称.举个例子,如果触发一个 camelCase 名字的事件: this.$emit( ...
vue.js滚动条事件，防抖
防抖具体操作如下(下列步骤,和代码内注释相对应,可以方便查看) 在主体盒子的高度<=页面向下滚动的距离加屏幕高度的情况进行判断是否执行(在满足条件时新增数据) 根据 this.ok(默认为tru ...
mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
Vue.js的基本使用学习笔记
VUE的基本使用学习笔记一. 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是 ...
用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
vue.js基础知识篇(5):过渡、Method和Vue实例方法
第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEven ...
vue.js:590 [Vue tip]: Event “removeitem“ is emitted in component ＜TodoItems＞ but the handler is regi
报错信息 vue.js:590 [Vue tip]: Event "removeitem" is emitted in component <TodoItems> bu ...

vue.js hover事件模拟

vue.js hover事件模拟相关推荐

最新文章

热门文章