利用Vue 3实现鼠标跟随效果案例

在Web开发领域，鼠标跟随效果是一种能显著提升页面交互性、增加动态感与趣味性的常见方式。接下来，我们将通过一个详细的案例，深入讲解如何运用Vue 3来打造一个更为完善的鼠标跟随效果组件，重点在于优化鼠标移动逻辑部分。

一、案例概述

我们要创建一个名为“球体跟随”的小应用，在这个应用里有一个可移动的球体，它能够精准地跟随鼠标在指定容器内的移动而移动，并且能妥善处理边界情况，确保球体始终在合理的范围内活动。此案例将全面展示Vue 3中事件处理、数据绑定以及更精细的逻辑控制等方面的基本用法。

二、实现步骤

1. 引入Vue 3

首先，我们得在HTML文件中引入Vue 3的全局构建版本。这一步通过在<head>标签内添加一个<script>标签就能轻松完成，如下所示：

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

2. 定义HTML结构

在<body>标签内，我们构造一个<div>容器，里面包含着我们的球体元素。球体元素的样式会通过Vue的绑定来实现动态更新，具体的HTML结构如下：

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

3. 添加CSS样式

为了让我们的容器和球体有一个合适的外观展示，我们为它们添加了一些基本的CSS样式，涵盖了位置、大小和颜色等方面，具体代码如下：

.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;
}

4. 编写Vue逻辑（重点完善鼠标移动逻辑）

在<script>标签内，我们要详细定义Vue应用的逻辑。这其中包括初始化球体的位置，以及更为关键的——定义一个方法来精准且合理地更新球体的位置，使其能够完美跟随鼠标移动并妥善处理各种边界情况。

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");

三、案例解析

在这个经过完善的案例中，我们依旧利用Vue 3的data函数来明确组件的状态，也就是球体的offsetX和offsetY属性。methods对象里包含的move方法在鼠标移动时会被触发，不过此时它的逻辑更加严谨，它会根据鼠标的当前位置，结合容器的尺寸以及球体的半径等因素，更为精准地更新球体的位置，确保球体始终在容器内合理移动且能紧密跟随鼠标。

我们还是通过Vue的:style绑定来动态设置球体的left和top样式，如此一来，球体的位置就能够随着offsetX和offsetY的值的变化而实时变化，从而实现流畅的鼠标跟随效果。