如何在 Element UI 中優雅地使用 this.$loading 顯示和隱藏加載動畫

在現代 Web 應用開發中，用戶體驗至關重要。當執行耗時操作（如網絡請求或數據處理）時，顯示一個友好的加載動畫可以讓用戶知道系統正在工作，而不是卡住了。Element UI 提供了一個非常方便的工具——this.$loading，用于顯示全局或局部的加載動畫。本文將詳細介紹如何在 Vue 組件中使用 this.$loading 來顯示和隱藏加載動畫，并提供實用的代碼示例。

---

1. 引言

在構建復雜的前端應用時，異步操作是不可避免的。無論是從服務器獲取數據還是進行大量計算，都需要一些時間來完成。為了提升用戶體驗，我們通常會在這些操作期間顯示一個加載動畫。Element UI 的 this.$loading 工具可以幫助我們輕松實現這一目標。接下來，我們將詳細介紹如何使用它。

---

2. 基本用法

顯示加載動畫

通過調用 this.$loading(options) 方法可以創建并顯示加載動畫。返回值是一個加載實例，可以通過該實例手動關閉加載動畫。

let loadingInstance = this.$loading({lock: true, // 是否鎖定屏幕text: '加載中...', // 顯示的文本spinner: 'el-icon-loading', // 自定義加載圖標background: 'rgba(0, 0, 0, 0.7)' // 背景遮罩顏色
});

隱藏加載動畫

可以通過調用加載實例的 close() 方法來關閉加載動畫。

loadingInstance.close();

---

3. 完整示例

以下是一個完整的示例，展示如何在 Vue 組件中使用 this.$loading 來顯示和隱藏加載動畫。

<template><div><el-button @click="startLoading">開始加載</el-button><el-button @click="stopLoading">停止加載</el-button></div>
</template><script>
export default {data() {return {loadingInstance: null // 存儲加載實例};},methods: {startLoading() {// 顯示加載動畫this.loadingInstance = this.$loading({lock: true,text: '拼命加載中...',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});},stopLoading() {// 隱藏加載動畫if (this.loadingInstance) {this.loadingInstance.close();}}}
};
</script>

在這個示例中，我們創建了兩個按鈕：一個用于啟動加載動畫，另一個用于停止加載動畫。點擊“開始加載”按鈕后，會顯示一個帶有自定義文本和圖標的加載動畫；點擊“停止加載”按鈕則會關閉該動畫。

---

4. 關鍵點解析

(1) 參數配置

this.$loading 接受一個配置對象，常用的參數如下：

• lock：是否鎖定屏幕，防止用戶交互。
• text：加載提示文字。
• spinner：自定義加載圖標，默認為 el-icon-loading。
• background：背景遮罩的顏色，支持透明度設置。

(2) 自動關閉

如果需要自動關閉加載動畫，可以結合 setTimeout 使用。例如：

startLoading() {this.loadingInstance = this.$loading({lock: true,text: '加載中...'});// 模擬異步操作后自動關閉setTimeout(() => {this.loadingInstance.close();}, 3000); // 3秒后自動關閉
}

(3) 局部加載

除了全局加載，還可以對某個 DOM 元素進行局部加載。只需在 options 中指定 target 即可。

let loadingInstance = this.$loading({target: document.querySelector('#local-element'), // 指定目標元素text: '局部加載中...'
});

---

5. 注意事項

避免重復創建

在調用 this.$loading 時，確保之前創建的加載實例已經關閉。否則可能會導致多個加載動畫疊加。可以在顯示新加載動畫前檢查是否存在舊實例，并手動關閉：

if (this.loadingInstance) {this.loadingInstance.close();
}

異步操作中的異常處理

在異步操作（如 API 請求）中使用加載動畫時，務必在 try-catch 或 finally 中關閉加載動畫，以防止因異常導致加載動畫無法關閉。

async fetchData() {let loadingInstance = this.$loading({ text: '加載中...' });try {await someAsyncOperation(); // 模擬異步操作} catch (error) {console.error('請求失敗', error);} finally {loadingInstance.close(); // 確保加載動畫關閉}
}

樣式覆蓋

如果默認的加載樣式不符合需求，可以通過 CSS 自定義樣式。例如：

.el-loading-spinner .el-loading-text {font-size: 16px;color: #fff;
}

---

6. 總結

通過 this.$loading，我們可以輕松實現全局或局部的加載動畫，從而提升用戶體驗。無論是簡單的按鈕點擊還是復雜的異步操作，都可以靈活地應用這一功能。如果你正在尋找一種優雅的方式來管理加載狀態，那么這篇文章提供的解決方案無疑是一個不錯的選擇。

希望本文能為你帶來啟發，并幫助你在實際開發中解決問題！如果有其他問題或想要了解更多優化技巧，請留言討論。

---

關注我獲取更多前端開發技巧和實戰經驗！

---

注：本文假設讀者已經具備一定的 Vue.js 和 Element UI 基礎知識。如果你對某個部分不太理解，歡迎留言討論！

---