如果您不想自己处理QAjaxBar组件，则Quasar LoadingBar插件提供了一种使用QAjaxBar 设置应用程序的简便方法。

有关演示，请访问QAjaxBar文档页面。

LoadingBar API

安装

// quasar.config.js

return {
  framework: {
    plugins: [
      'LoadingBar'
    ],
    config: {
      loadingBar: { /* look at QuasarConfOptions from the API card */ }
    }
  }
}

LoadingBar选项与配置QAjaxBar时相同.

用法

在Vue组件内：

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.loadingBar.start()
  $q.loadingBar.stop()
  $q.loadingBar.increment(value)
}

在Vue组件外：

import { LoadingBar } from 'quasar'

LoadingBar.start()
LoadingBar.stop()
LoadingBar.increment(value)

设置默认值

如果您希望设置一些默认值，而不是每次都指定它们，可以通过使用 quasar.config.js > framework > config > loadingBar: {…} 或调用LoadingBar.setDefaults({...})或$q.loadingBar.setDefaults({...}). 支持所有QAjaxBar属性.

在Vue组件内：

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.loadingBar.setDefaults({
    color: 'purple',
    size: '15px',
    position: 'bottom'
  })
}

在Vue组件外 (包括启动文件)：

import { LoadingBar } from 'quasar'

LoadingBar.setDefaults({
  color: 'purple',
  size: '15px',
  position: 'bottom'
})

使用一个Ajax过滤器

v2.4.5+

如果你想只对某些URL触发LoadingBar，那么你可以使用setDefaults()方法（如上所述）来配置hijackFilter属性：

import { LoadingBar } from 'quasar'

LoadingBar.setDefaults({
  // 返回一个布尔值，其含义为
  // "这个URL是否应该触发加载条？"
  hijackFilter (url) {
    // 例子(只有https://my-service.com/* 应该触发)
    return /^https:\/\/my-service\.com/.test(url)
  }
})