mouseOver和mouseLeave事件在vue中的应用

目标：利用mouseOver和mouseLeave实现鼠标移入和移出时的不同效果。

初始状态：

点击最右侧按钮后的效果：（具体实现方法见下篇文章）

要完成的效果：在“已完成编辑 √”状态时，鼠标移入，出现如下效果，移出时恢复

具体实现：

template中：

<div class="resultType " ref="paintOne" :style="activeOne"><span class="resultTypeTitle">我的偶像</span><span class="paintWord" v-show="isShowPaintWordOne">我的偶像是千玺</span><spanclass="paintWordFinish"@mouseleave="mouseLeaveOne"@mouseover="mouseOverOne"v-show="isShowPaintWordFinishOne">偶像最棒&nbsp;&nbsp;&nbsp;√</span><imgsrc="./theme/img/editWhite.png"@click="finishPaintOne"v-show="isShowPaintWordOne"/><imgsrc="./theme/img/editBlue.png"@click="finishPaintRecoverOne"v-show="isShowPaintWordFinishOne"/>
</div><div class="resultTypeContent" ref="contentOne">他是易烊千玺，他很棒！</div>

script的data中：

export default {data() {return {activeOne:'',}}}

script的methods中：

 mouseOverOne() {this.activeOne ='border: 1px solid rgba(107,195,255,0.80); box-shadow: #1a446a 0px 0px 30px inset;';// 操作dom 获取p标签改变其样式var paintOne = this.$refs.paintOne;this.$refs.contentOne.style.display = 'block';},// 鼠标移出mouseLeaveOne() {this.activeOne = '';this.$refs.paintOne.style = '';this.$refs.contentOne.style.display = 'none';},

样式就不展开写了。

这样就利用mouseOver和mouseLeave实现了鼠标移入和移出时的不同效果。

mouseOver和mouseLeave事件在vue中的应用相关推荐

Vue中鼠标移入移出事件-解析
鼠标在li上移动也会触发移出事件两组鼠标事件 mouseover 和 mouseout mouseenter 和 mouseleave mouseover 和 mouseout 什么时候使用说明根 ...
js的鼠标事件（JavaScript的鼠标事件，vue的鼠标事件）
js鼠标事件,相关属性: var div = document.getElementById("box")// 1.单击事件 onclickdiv.onclick = functi ...
vue中关于$emit和.sync的用法
父组件可以使用props 把数据传给子组件. 子组件可以使用 $emit触发父组件的自定义事件而vue中对$emit的定义如下: 触发当前实例上的事件.附加参数都会传给监听器回调. vm.$emit ...
vue中8种组件通信方式,纯干货！值得收藏
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...
Vue中组件之间8中通信方式
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...
vue划入划出事件_基于vue中对鼠标划过事件的处理方式详解
鼠标事件进行监听需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层翻阅了一些博客,发现好多都提到了mous ...
Vue实现鼠标悬浮隐藏与显示图片效果 @mouseenter 和 @mouseleave事件
前言前端vue 有个功能是鼠标移动到指定item上显示出来一个编辑和删除的图标鼠标悬停在列表那么需要有悬浮显示的列表编辑和删除icon 文字不好描述,因为是web端录屏也比较麻烦这里用截图说明 ...
javascript中mouseover和mouseout事件详解
原文链接:http://blog.sina.com.cn/s/blog_468530a60101awlw.html 与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...

mouseOver和mouseLeave事件在vue中的应用

mouseOver和mouseLeave事件在vue中的应用相关推荐

最新文章

热门文章