Loading 載入

在資料讀取或處理時,用遮罩與轉圈提示使用者「正在進行中」。使用 Element Plus 的 v-loading 指令或 ElLoading 服務。

設計準則

• 區塊載入蓋在該區塊上:用 v-loading 綁在對應容器(表格、卡片、列表),遮住正在更新的那塊就好,不要動不動整頁鎖住
• 整頁載入(fullscreen / 服務式) 只給「必須等待、不能操作」的關鍵流程(例如批次發送前的計算);要加 lock 鎖捲動
• 載入文字統一:用「載入中…」「處理中,請稍候…」等中文,語氣一致
• 遮罩背景用半透明,讓使用者仍看得到底下內容輪廓;整頁載入才用較深背景
• 載入時間可能較長時,務必給文字說明在做什麼,避免使用者以為當機

區塊載入(v-loading)

loading

自訂文字與背景

loading

整頁載入(服務式)

loading

Do / Don't

✅ Do	❌ Don't
只遮住正在更新的區塊	更新一個表格卻整頁鎖住
長時間載入給文字說明	只有轉圈不知在等什麼
整頁載入加 lock 鎖捲動	整頁載入卻還能亂捲亂點

給工程師

• 指令式:v-loading="bool",搭配屬性 element-loading-text、element-loading-icon、element-loading-background、element-loading-spinner;修飾詞 .fullscreen、.lock、.body
• 服務式:const l = ElLoading.service({ target, text, background, lock, fullscreen }),結束呼叫 l.close()
• 完整 API 見 Element Plus Loading 文件。本站規範優先於 EP 文件中的視覺建議。