本文实例为大家分享了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坐标。
