LoadingBar

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

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

安装

// quasar.conf.js

return {
  framework: {
    plugins: [
      'LoadingBar'
    ],
    config: {
      [object Object]: { /* look at QUASARCONFOPTIONS from the API card (bottom of page) */ }
    }
  }
}

LoadingBar选项与配置QAjaxBar时相同.

WARNING

使用Quasar的UMD版本时,默认情况下会安装所有组件、指令和插件。 这包括LoadingBar。 如果您希望禁用它,请指定loadingBar: { skipHijack: true }(关闭监听Ajax流量)。

用法

在Vue组件内:

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

在Vue组件外:

import { LoadingBar } from 'quasar'

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

设置默认值

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

在Vue组件内:

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

在Vue组件外:

import { LoadingBar } from 'quasar'

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

LoadingBar API

Loading API...
Please wait...