如果你不想自己处理 QAjaxBar 组件，Quasar LoadingBar 插件提供了一种使用 QAjaxBar 轻松设置应用的方法。

¥The Quasar LoadingBar plugin offers an easy way to set up your app with a QAjaxBar in case you don’t want to handle a QAjaxBar component yourself.

要查看演示，请访问 QAjaxBar 文档页面。

¥For a demo, please visit the QAjaxBar documentation page.

// quasar.config file

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

LoadingBar 选项与配置 QAjaxBar 时相同。

¥LoadingBar options are same as when configuring a QAjaxBar.

用法(Usage)

¥Usage

在 Vue 组件内部：

¥Inside Vue components:

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

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

Vue 组件外部：

¥Outside of Vue components:

import { LoadingBar } from 'quasar'

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

设置默认值(Setting Up Defaults)

¥Setting Up Defaults

如果你希望设置一些默认值，而不是每次都指定它们，你可以使用 quasar.config 文件 > 框架 > 配置 > 加载栏：{…} 或者调用 LoadingBar.setDefaults({...}) 或 $q.loadingBar.setDefaults({...})。支持所有 QAjaxBar 属性。

¥Should you wish to set up some defaults, rather than specifying them each time, you can do so by using quasar.config file > framework > config > loadingBar: {…} or by calling LoadingBar.setDefaults({...}) or $q.loadingBar.setDefaults({...}). Supports all QAjaxBar properties.

在 Vue 组件内部：

¥Inside Vue components:

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

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

Vue 组件之外（包括启动文件）：

¥Outside of Vue components (includes boot files):

import { LoadingBar } from 'quasar'

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

使用 Ajax 过滤器

v2.4.5+

(Using an Ajax filter

v2.4.5+

)

¥Using an Ajax filter

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

¥Should you want to trigger LoadingBar only for some URLs, then you can use the setDefaults() method (described above) to configure the hijackFilter property:

import { LoadingBar } from 'quasar'

LoadingBar.setDefaults({
  // return a Boolean which has the meaning of
  // "does this URL should trigger LoadingBar?"
  hijackFilter (url) {
    // example (only https://my-service.com/* should trigger)
    return /^https:\/\/my-service\.com/.test(url)
  }
})