LoadingBar

如果您不想使用QAjaxBar组件的话，Quasar 的 LoadingBar 插件提供了一个更简单的方式来为 ajax 请求添加一个进度条。

请转到QAjaxBar组件页面查看示例 demo。

LoadingBar API

安装

// quasar.config.js

return {
  framework: {
    plugins: [
      'LoadingBar'
    ],
    config: {
      loadingBar: { /* 参考 API 卡片中的 QuasarConfOptions  */ }
    }
  }
}

LoadingBar options are same as when configuring a 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 插件指定一个全局的默认配置，或者调用LoadingBar.setDefaults({...}) 或 $q.loadingBar.setDefaults({...})函数。配置对象中支持QAjaxBar 中全部的 props 参数。

在 Vue 组件内：

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

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

在 Vue 组件外(包括在 boot 文件中):

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({
  // 返回一个 boolean 值，表示当前 url 是否会触发 LoadingBar
  hijackFilter (url) {
    // 示例： (只捕获 https://my-service.com/* )
    return /^https:\/\/my-service\.com/.test(url)
  }
})