加载是一项功能，您可以使用该功能在应用内容顶部显示带有旋转器的叠加层，以通知用户后台操作正在进行。 无需为全局后台操作在页面中添加复杂的逻辑。

Loading API

安装

// quasar.config.js

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

用法

加载使用延迟（500毫秒）来显示自身，使得快速操作不会引起屏幕闪烁。 这是因为显示然后迅速隐藏进度条使得用户没有机会看到发生了什么。 显示之前的延迟消除了混淆。

在Vue组件中：

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.loading.show({
    delay: 400 // ms
  })

  $q.loading.hide()
}

在Vue组件之外：

import {
  Loading,

  //可选！，例如下面例子
  //使用的自定义旋转器
  QSpinnerGears
} from 'quasar'

// 默认选项
Loading.show()

// 完全自定y我
Loading.show({
  spinner: QSpinnerGears,
  // 其它属性
})

Loading.hide()

默认选项

自定义

Content sanitization

多组并行

v2.8+

在生成每个Loading实例时指定group属性，你可以通过使用返回的函数更新或隐藏它们。

显然，我们一次只能显示一个组，所以它们被生成的顺序决定了它们被显示的优先级（最后一个比前面的优先；LIFO）。

你可以使用返回函数来显示/更新/隐藏组，或者直接调用Loading.show({ group: '.group_name.', ... })或Loading.hide('.group_name.')。

以下两种方式完全等同（你甚至可以在它们之间混合调用）：

/**
 * 第一种方式
 */

// 我们产生了这个组
const myLoadingGroup = Loading.show({
  group: 'my-group',
  message: 'Some message'
})

// 使用参数，所以我们更新这个组
myLoadingGroup({ message: 'Second message' })

// 没有参数，所以我们指示Quasar隐藏这个组。
myLoadingGroup()

/**
 * 第二，同等方式
 */

// 我们产生了这个组
Loading.show({
  group: 'my-group',
  message: 'Some message'
})

// 我们更新该组（在这种情况下，我们需要指定组名）
Loading.show({
  group: 'my-group'
  message: 'Second message'
})

// 我们隐藏了这个特定组
Loading.hide('my-group')

设置默认值

如果您希望设置一些默认值，而不是每次都指定它们，可以使用quasar.config.js > framework > config > loading: {…} 或调用 Loading.setDefaults({...}) 或 $q.loading.setDefaults({...})。