一个跟随随便移动的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>