利用Vue3实现鼠标跟随效果

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="Application">
    <div class="container" @mousemove="move($event)">
        <div class="ball" :style="{left: offsetX + 'px', top: offsetY + 'px'}">
        </div>
    </div>
</div>

.container {
    position: absolute;
    width: 440px;
    height: 440px;
    background-color: blanchedalmond;
    display: inline-block;
}

.ball {
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: red;
    border-radius: 30px;
    z-index: 100;
}

const App = {
    data() {
        return {
            offsetX: 100, // 球体的初始x坐标
            offsetY: 100  // 球体的初始y坐标
        }
    },
    methods: {
        move(event) {
            // 获取鼠标在容器内的相对坐标
            let x = event.offsetX;
            let y = event.offsetY;

            // 获取容器的宽度和高度
            let containerWidth = document.querySelector('.container').clientWidth;
            let containerHeight = document.querySelector('.container').clientHeight;

            // 获取球体的半径
            let ballRadius = 30;

            // 计算球体在容器内可移动的最大x坐标和最大y坐标
            let maxX = containerWidth - ballRadius;
            let maxY = containerHeight - ballRadius;

            // 更新球体的x坐标，确保不会移出容器边界且能合理跟随鼠标
            if (x >= 0 && x <= maxX) {
                this.offsetX = x - ballRadius;
            } else if (x < 0) {
                this.offsetX = 0;
            } else {
                this.offsetX = maxX;
            }

            // 更新球体的y坐标，确保不会移出容器边界且能合理跟随鼠标
            if (y >= 0 && y <= maxY) {
                this.offsetY = y - ballRadius;
            } else if (y < 0) {
                this.offsetY = 0;
            } else {
                this.offsetY = maxY;
            }
        }
    }
}
Vue.createApp(App).mount("#Application");