vue的鼠标事件

一、悬浮事件：

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）当鼠标进入时隐藏上层的图片；显示进度条，内容和弹幕