在
Vue 2 中，可使用标准的
鼠标事件来监听和处理用户的
鼠标交互，其使用原生的 DOM
事件。以下是常见
鼠标事件及用法：
1
. **常见
鼠标事件及触发条件**
- `click`：用户点击元素时触发。
- `mouseenter`：
鼠标指针进入元素内部时触发，较为常用。
- `mouseleave`：
鼠标指针离开元素时触发，较为常用。
- `mousedown`：用户按下
鼠标按钮时触发。
- `mouseup`：用户释放
鼠标按钮时触发。
- `mousemove`：
鼠标指针在元素内部移动时触发。
- `mouseover`：
鼠标指针位于元素上方时触发，包括子元素，有子元素会触发多次。
- `mouseout`：
鼠标指针离开元素时触发，包括子元素，有子元素会触发多次。
- `dblclick`：用户双击元素时触发。
- `contextmenu`：用户右击元素时触发，通常用于显示上下文菜单 [^1]。
2
. **使用示例**
- **实现双击
事件**：在
Vue 2 中实现双击
事件可以通过多种方式，既可以使用
Vue 的内置 `@dblclick` 指令，也能通过 `addEventListener` 方法手动添加
事件监听器 [^2]。
- **跟随
鼠标悬浮框效果**
- **页面结构分析**：logo 图片部分用 `ul li` 循环结构，悬浮框部分单独写一个 `div`，用 `position: absolute` 定位 [^3]。
- **功能实现分析**：`@mouseenter` 和 `@mouseleave` 控制悬浮框的显示隐藏，`@mousemove` 控制悬浮框出现的位置 [^3]。
- **代码实现**
```
vue
<template>
<ul class="netimage">
<li v-for="(item,index) in data_content" :key="index" @mouseenter="enter(item)" @mouseleave="leave" @mousemove="updateXY">
<img :src="item
.imgPath+item
.imgName"/>
</li>
</ul>
<div v-show="seen" class="hover_con" :style="positionStyle">
<!-- 悬浮框内容 -->
</div>
</template>
<script>
export default {
name: 'netImage',
data() {
return {
data_content: [],
seen: false,
x: 0,
y: 0,
positionStyle: {top: '20px', left: '20px'},
};
},
methods: {
enter(item) {
this
.seen = true;
},
leave() {
this
.seen = false;
},
updateXY(event) {
this
.x = event
.pageX;
this
.y = event
.pageY;
this
.positionStyle = {top: this
.y - 164 + 'px', left: this
.x - 374 + 'px'};
}
}
}
</script>
```
扫一扫
436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
