Ajax栏

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

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

TIP

如果您想要一种更简单,更方便的方式为您的用户提供Ajax栏,请查看加载栏插件,它实际上是推荐方式

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