vue如何实现鼠标悬浮框效果

这篇文章将为大家详细讲解有关vue如何实现鼠标悬浮框效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

具体内容如下

效果：

html：

<div  @mouseenter="enter"   @mouseleave="leave"   @mousemove="move">鼠标触碰元素</div> <div v-show="popUpShow" class="hover_con" :>悬浮框</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坐标。

关于“vue如何实现鼠标悬浮框效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。