利用Vue3實現(xiàn)鼠標跟隨效果

更新時間：2024年11月30日 11:07:37 作者：好奇的菜鳥

在Web開發(fā)領域,鼠標跟隨效果是一種能顯著提升頁面交互性、增加動態(tài)感與趣味性的常見方式,下面我們看看如何使用Vue3實現(xiàn)鼠標跟隨效果吧

在Web開發(fā)領域，鼠標跟隨效果是一種能顯著提升頁面交互性、增加動態(tài)感與趣味性的常見方式。接下來，我們將通過一個詳細的案例，深入講解如何運用Vue 3來打造一個更為完善的鼠標跟隨效果組件，重點在于優(yōu)化鼠標移動邏輯部分。

一、案例概述

我們要創(chuàng)建一個名為“球體跟隨”的小應用，在這個應用里有一個可移動的球體，它能夠精準地跟隨鼠標在指定容器內的移動而移動，并且能妥善處理邊界情況，確保球體始終在合理的范圍內活動。此案例將全面展示Vue 3中事件處理、數(shù)據(jù)綁定以及更精細的邏輯控制等方面的基本用法。

二、實現(xiàn)步驟

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的綁定來實現(xiàn)動態(tài)更新，具體的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樣式

為了讓我們的容器和球體有一個合適的外觀展示，我們?yōu)樗鼈兲砑恿艘恍┗镜腃SS樣式，涵蓋了位置、大小和顏色等方面，具體代碼如下：

.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函數(shù)來明確組件的狀態(tài)，也就是球體的offsetX和offsetY屬性。methods對象里包含的move方法在鼠標移動時會被觸發(fā)，不過此時它的邏輯更加嚴謹，它會根據(jù)鼠標的當前位置，結合容器的尺寸以及球體的半徑等因素，更為精準地更新球體的位置，確保球體始終在容器內合理移動且能緊密跟隨鼠標。

我們還是通過Vue的:style綁定來動態(tài)設置球體的left和top樣式，如此一來，球體的位置就能夠隨著offsetX和offsetY的值的變化而實時變化，從而實現(xiàn)流暢的鼠標跟隨效果。