LoadingBar | Quasar 框架

加载栏

Quasar LoadingBar 插件提供了一种简单的方法来为您的应用设置 QAjaxBar，如果您不想自己处理 QAjaxBar 组件。

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

Quasar CLI

Vite 插件 / Vue CLI

UMD

// quasar.config file

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

LoadingBar 选项与配置 QAjaxBar 时相同。

警告

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

使用

在 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 文件 > 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({
  // 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)
  }
})

发现错误？在浏览器中编辑此页面

1. 简介

2. LoadingBar API

3. 安装

4. 使用

4.1. 设置默认值

4.2. 使用 Ajax 过滤器

使用

设置默认值

使用 Ajax 过滤器v2.4.5+

使用 Ajax 过滤器
v2.4.5+