在大多数移动应用程序甚至某些桌面应用中，您很可能会通过Ajax调用与服务器进行API通信。 由于这些调用可能需要一两秒以上的时间，因此在进行此类API调用时，最好向用户提供反馈。 QAjaxBar正是在其中帮助您。

QAjaxBar是一个组件，每当正在进行Ajax调用（无论使用什么Ajax库）时，它都会显示一个加载栏（如Youtube）。 也可以手动触发。

QAjaxBar API

用法

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

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

基础

请查阅“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知道可以同时处理多个事件。