废话不多说,直接上代码,已验证,功能正常
代码来源GPT4o:GPT4o
<template>
<div id="app">
<div id="followMe" :style="divStyle">跟随鼠标的Div</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
// 初始化div的位置
posX: 0,
posY: 0,
}
},
computed: {
// 使用计算属性动态更新div的样式
divStyle() {
return {
position: 'absolute',
left: `${this.posX}px`,
top: `${this.posY}px`,
width: '100px',
height: '100px',
backgroundColor: 'red',
color: 'white',
textAlign: 'center',
lineHeight: '100px',
borderRadius: '50%',
}
}
},
mounted() {
// 在组件挂载后添加鼠标移动的事件监听
document.addEventListener('mousemove', this.updatePosition);
},
beforeDestroy() {
// 在组件销毁前移除事件监听
document.removeEventListener('mousemove', this.updatePosition);
},
methods: {
updatePosition(e) {
// 更新div的位置为鼠标位置,减去div宽高的一半
this.posX = e.pageX - 50;
this.posY = e.pageY - 50;
}
}
}
</script>
<style>
/* 可以添加一些全局样式 */
</style>