红色箭头代表鼠标位置,蓝色区域跟随鼠标出现,鼠标进行其他操作的时候,蓝色区域隐藏。
vue全码
<template>
<div
@mousemove="updatePosition"
@mouseleave="hideDiv"
class="container"
:style="{ position: 'relative' }"
>
<div
v-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>