載入中狀態頁面 - daniel-qa/Vue GitHub Wiki

載入中狀態頁面

ElLoading.service() 全屏 Loading

  • 呼叫 showLoading() ，可以進行全屏的 Loading 狀態 Block

  • loadingInstance.close() 只要放在操作完成後的位置，就可以關閉全螢幕 Loading

<template>
  <el-button type="primary" @click="showLoading">顯示全螢幕 Loading</el-button>
</template>

<script setup>
import { ElLoading } from 'element-plus'

const showLoading = () => {
  // 開啟全螢幕 Loading
  const loadingInstance = ElLoading.service({
    lock: true, // 鎖住滾動
    text: '加載中...', // 文字
    background: 'rgba(0, 0, 0, 0.7)' // 背景半透明
  })

  // 模擬 3 秒後關閉
  setTimeout(() => {
    loadingInstance.close()
  }, 3000)
}
</script>
  • 先定義一個變數，稍後在函式內部賦值 ，可以共用
let loadingInstance = null

載入中元件分類

Loading 類型 作用範圍 適用場景
v-loading 單個 UI 元素 表格、按鈕、卡片等
ElLoading.service({ target }) 局部 DOM 節點 div、section 內局部區域
ElLoading.service() 全屏 Loading 全局數據加載、API 請求
router.beforeEach() 路由切換時 Loading 頁面跳轉過渡
Vuex / Pinia 全局 loading 全局狀態 Loading 共享 API 請求狀態
Suspense 異步組件加載 Vue 3 懶加載組件
v-if + CSS 手動控制 Loading 基本無框架應用
⚠️ **GitHub.com Fallback** ⚠️