vue实现鼠标悬浮框效果
作者：天高任鸟飞dyz（前端）
这篇文章主要为大家详细介绍了vue实现鼠标悬浮框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现鼠标悬浮框效果的具体代码，供大家参考，具体内容如下
效果：
html：
<div @mouseenter="enter" @mouseleave="leave" @mousemove="move" > 鼠标触碰元素 </div> <div v-show="popUpShow" class="hover_con" :style="positionStyle"> 悬浮框 </div>
js：
export default {
name: '',
data() {
return {
popUpShow:false,
positionStyle:{top:'0px',left:'0px'}
}
},
methods: {
enter() {
this.popUpShow = true
},
leave() {
this.popUpShow = false
},
move(event) {
const x = event.pageX + 15 + 'px'
const y = event.pageY + 10 + 'px'
this.positionStyle = { top: y, left: x }
}
}
}css：
.hover_con{
position: fixed;
max-width: 220px;
padding: 10px;
border: 1px solid #666;
background: #ccc;
}关于offsetX、offsetY、clientX、clientY、pageX、pageY、screenX、screenY的区别
offsetX、offsetY: 鼠标相对于事件源元素（srcElement）的X,Y坐标
clientX、clientY: 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。
pageX、pagey: 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没 有这2个属性
screenX、screenY: 鼠标相对于用户显示器屏幕左上角的X,Y坐标。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。