How to realize the effect of Mouse floating frame by vue
This article will explain in detail how to achieve the mouse suspension box effect for everyone. Xiaobian thinks it is quite practical, so share it with everyone for a reference. I hope you can gain something after reading this article.
specific contents are as follows
Effect:
html：
Mouse touch element hover box
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;}
About the difference between offsetX, offsetY, clientX, clientY, pageX, pageY, screenX, screenY
offsetX, offsetY: X,Y coordinates of the mouse relative to the srcElement
clientX, clientY: X, Y coordinates (window coordinates) of the mouse relative to the viewable area of the browser window, excluding toolbars and scroll bars.
pageX, pageey: Similar to event.clientX, event.clientY, but they use document coordinates instead of window coordinates. These two attributes are not standard attributes, but they are widely supported. These two attributes are not present in IE events
screenX, screenY: X,Y coordinates of the mouse relative to the upper-left corner of the user's display screen.
About "vue how to achieve the mouse suspension box effect" this article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it to let more people see.
