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

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

QAjaxBar API

用法

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

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

基础

<template>
  <div class="q-pa-md">
    <q-ajax-bar
      ref="bar"
      position="bottom"
      color="accent"
      size="10px"
      skip-hijack
    />

    <q-btn color="primary" label="Trigger" @click="trigger" />
  </div>
</template>

请查阅“API”部分中所有可以使用的属性。

Ajax过滤器

v1.17.2+

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

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

<script>
export default {
  methods () {
    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知道可以同时处理多个事件。