vue鼠标悬浮菜单,vue悬浮按钮

　　本文主要详细介绍了用vue实现鼠标浮动框。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享vue实现鼠标浮动框效果的具体代码，供大家参考。具体内容如下

　　效果：

　　html:

　　差异

　　@mouseenter=enter

　　@mouseleave=leave

　　@mousemove=move

　　鼠标触摸元件

　　/div

　　div v-show= popup show class= hover _ con :style= position style

　　悬挂框架

　　/div

　　js:

　　导出默认值{

　　名称： ，

　　data() {

　　返回{

　　popUpShow:假，

　　position style:{上： 0px ，左： 0px}

　　}

　　},

　　方法：{

　　enter() {

　　this.popUpShow=true

　　},

　　leave() {

　　this.popUpShow=false

　　},

　　移动(事件){

　　const x=event.pageX 15 px

　　const y=event.pageY 10 px

　　this.positionStyle={ top: y，left: x }

　　}

　　}

　　}

　　css:悬停图标{

　　位置：固定；

　　最大宽度：220像素；

　　填充：10px

　　边框：1px纯色# 666；

　　背景：# ccc

　　}

　　关于offsetX、offsetY、clientX、clientY、pageX、pageY、screenX、screenY的区别

　　Offx，offsetX:鼠标相对于事件源元素(srcElement)的X，Y坐标

　　ClientX，clientY:鼠标相对于浏览器窗口可见区域的x，y坐标(窗口坐标)。可见区域不包括工具栏和滚动条。

　　PageX，pagey:类似于event.clientX和event.clientY，但是它们使用文档坐标而不是窗口坐标。这两个属性不是标准属性，但是它们得到了广泛的支持。这两个属性在IE事件中不存在。

　　ScreenX，screenY:鼠标相对于用户监视器屏幕左上角的X，Y坐标。

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。