vue实现鼠标悬浮框效果
时间：2022-11-18 10:10:19|栏目：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坐标。
