您好,登录后才能下订单哦!
这篇文章将为大家详细讲解有关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如何实现鼠标悬浮框效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。