在大多數行動應用程式，甚至是某些桌面應用程式中，您很可能需要透過 Ajax 呼叫 與伺服器進行 API 通訊。由於這些呼叫可能需要一兩秒以上的時間，因此在進行 API 呼叫時，向使用者提供回饋是良好的使用者體驗。這就是 QAjaxBar 可以協助您的地方。

QAjaxBar 是一個元件，會在 Ajax 呼叫（無論使用哪個 Ajax 函式庫）進行中時顯示載入列（如 Youtube）。它也可以手動觸發。

用法

QAjaxBar 元件會自動捕捉 Ajax 呼叫（除非另有指示）。

以下範例僅為示範目的而手動觸發事件。這個範例設定在頁面底部顯示（有多個位置可用！），尺寸為 10 像素（預設值不同），並使用自訂顏色。

基本

請查看 API 章節以了解所有可用的屬性。

Ajax 過濾器

v2.4.5+

如果您希望 QAjaxBar 僅針對某些 URL 觸發（而不是像預設行為那樣針對所有 URL 觸發），則可以使用 hijackFilter 屬性。

<template>
  <q-ajax-bar :hijack-filter="myFilterFn" />
</template>

<script>
export default {
  setup () {
    return {
      myFilterFn (url) {
        // example (only https://my-service.com/* should trigger)
        return /^https:\/\/my-service\.com/.test(url)
      }
    }
  }
}
</script>

提示

• 如果 Ajax Bar 同時捕捉到多個事件，`@start` 和 `@stop` 仍然只會觸發一次：在載入列開始顯示和隱藏時。
• 每次觸發 Ajax 呼叫時，都會調用 start()。結束時，會調用 stop()。因此，如果您也手動觸發 QAjaxBar，則每次新事件開始時都必須調用 start()，每次事件結束時都必須調用 stop()。QAjaxBar 知道如何同時處理多個事件。
• 自動捕捉功能旨在專門與使用 XMLHttpRequest (XHR) 的函式庫一起使用。因此，如果您選擇原生瀏覽器 Fetch API，它將不會自動啟動載入列。