一个跟随随便移动的div盒子（vue版本）

废话不多说，直接上代码，已验证，功能正常
代码来源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>