一、悬浮事件:
  1. mouseenter :进入
  2. mouseover:在
  3. mousemove:移动
  4. mouseout:移出
  5. mouseleave:离开
<div class="container" style="width: 100px;height: 100px;background: #42B983;"
		 @mouseenter="enter" 
		 @mouseover="over" 
		 @mousemove="move" 
		 @mouseout="out" 
		 @mouseleave="leave">
 </div>

执行的顺序如下
在这里插入图片描述

二、点击事件
  1. click:单击
  2. mousedown:按下鼠标
  3. mouseup:松开鼠标
  4. dblclick:双击
<div class="container" style="width: 100px;height: 100px;background: #FFC0CB;margin-top: 30px;" 
		 @click="oneclick"
		 @mousedown="down"
		 @mouseup="up" 
		 @dblclick="doubleclick">
 </div>

执行的顺序如下
在这里插入图片描述
利用鼠标事件可以实现进入特定区域实现某些效果;如进去选中范围之后把覆盖的图片隐藏;这里我是用了定时器setTimeout(大概是0.6s)当鼠标进入时隐藏上层的图片;显示进度条,内容和弹幕
在这里插入图片描述

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐