How to realize the pop-up effect of components following mouse position by vue

This article mainly shows you "vue how to achieve components to follow the mouse position pop-up effect", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "vue how to achieve components to follow the mouse position pop-up effect" this article.

The card appears when the mouse is placed on my, and the card position follows the mouse. The card is hidden when the mouse removes the card.

When the mouse is moved in, the mouse coordinates are obtained, and the mouse position of the parent component is passed to the child component through prop.

ToCenter (event) {const {XJI y} = event this.mouse_x=x; this.mouse_y=y; this.showCenter=true;}

The child component changes the div coordinates by dynamically binding the style.

Attention!

Instead of using watch at first, you can modify it directly in data, as shown above.

This will cause the data to not get the property values in the prop after the refresh. The figure below is as follows

This can be solved by adding watch to listen for changes in XBI y in prop. The final version is as follows:

Data () {return {content: ['upload profile', 'modify profile', 'exit account', 'online feedback'], sty: {top:'', left:''}}, watch: {x:function (val) {this.sty.left= (val+10) + 'px'}, y:function (val) {this.sty.top= (val+30) +' px'}

By the way, you can close the mouse removal card by adding a mouse removal event to the component.

LeaveCenter () {this.showCenter=false;} above is all the contents of the article "how to achieve the pop-up effect of components following the mouse position in vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!