【VUE】封装一个追随鼠标的漂浮组件框架

红色箭头代表鼠标位置，蓝色区域跟随鼠标出现，鼠标进行其他操作的时候，蓝色区域隐藏。

vue全码

<template><div@mousemove="updatePosition"@mouseleave="hideDiv"class="container":style="{ position: 'relative' }"><divv-if="showDiv":style="{position: 'absolute',top: `${yPosition}px`,left: `${xPosition}px`,width: '100px',height: '100px',backgroundColor: 'lightblue'}">1111111111<!-- 这里是你想要显示的内容 --></div><!-- 这里是页面的其他内容 --></div>
</template><script>
export default {name: "SelectMenu",data() {return {xPosition: 0,yPosition: 0,showDiv: false};},methods: {updatePosition(event) {this.xPosition = event.clientX;this.yPosition = event.clientY;this.showDiv = true;},hideDiv() {this.showDiv = false;}}
}
</script><style scoped>
.container {height: 500px; /* 可以根据需要调整高度 */
}
</style>