在大多数移动应用甚至某些桌面应用中，你很可能需要通过 Ajax 调用 与服务器进行一些 API 通信。由于这些调用可能需要一两秒以上的时间，因此在进行此类 API 调用时，提供用户反馈有助于提升用户体验。这时 QAjaxBar 就可以帮你了。

¥In most mobile apps and even some desktop apps, you will most likely have some API communication to a server via an Ajax call. Since these calls can take more than a second or two, it is good UX to offer the user feedback, when such an API call is being made. Which is where QAjaxBar comes into helping you out.

QAjaxBar 组件会在 Ajax 调用（无论使用哪个 Ajax 库）进行时显示加载栏（类似 Youtube）。也可以手动触发。

¥QAjaxBar is a component which displays a loading bar (like Youtube) whenever an Ajax call (regardless of Ajax library used) is in progress. It can be manually triggered as well.

用法(Usage)

¥Usage

QAjaxBar 组件会自动捕获 Ajax 调用（除非被告知不要这样做）。

¥The QAjaxBar component captures Ajax calls automatically (unless told not to).

以下示例手动触发事件仅用于演示目的。此节点设置为显示在页面底部（多个位置可用！），大小为 10px（默认值不同），并使用自定义颜色。

¥The example below triggers events manually for demonstrating purposes only. This one is set to appear at bottom (multiple positions available!) of the page, with a 10px size (default is different) and uses a custom color.

基本(Basic)

¥Basic

请查看 API 部分，了解所有可用的属性。

¥Please check out the API section for all properties that you can use.

Ajax 过滤器

v2.4.5+

(Ajax filter

v2.4.5+

)

¥Ajax filter

如果你希望 QAjaxBar 仅对某些 URL 触发（而不是像默认行为那样对所有 URL 触发），那么你可以使用 hijackFilter 属性：

¥Should you want QAjaxBar to trigger only for some URLs (and not for all, like in the default behavior), then you can use the hijackFilter property:

<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>

提示(Tips)

¥Tips

• 如果 Ajax Bar 同时捕获多个事件，@start 和 @stop 仍然只会触发一次：栏何时开始显示以及何时隐藏。

  ¥If multiple events are captured by Ajax Bar simultaneously, @start and @stop will still be triggered only once: when bar starts showing up and when it becomes hidden.

• 每次 Ajax 调用在触发时都会进行 start() 调用。当它结束时，它会调用 stop()。是的，如果你还手动触发 QAjaxBar，则必须在每次新事件开始时调用 start()，并在每次事件结束时调用 stop()。QAjaxBar 可以同时处理多个事件。

  ¥Each Ajax call makes a start() call when it is triggered. When it ends, it calls stop(). So yes, if you also manually trigger QAjaxBar you must call start() each time a new event is starting and stop() each time an event finished. QAjaxBar knows to handle multiple events simultaneously.

• 自动捕获功能旨在与使用 XMLHttpRequest (XHR) 的库配合使用。因此，如果你选择原生浏览器的 Fetch API 属性，它将不会自动启动加载栏。

  ¥The automatic capture is designed to function exclusively with libraries utilizing XMLHttpRequest (XHR). Consequently, if you opt for the native browser Fetch API, it won’t initiate the loading bar automatically.