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

Loading API

安装

// quasar.conf.js

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

用法

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

在Vue组件中：

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

this.$q.loading.hide()

在Vue组件之外：

import {
  Loading,

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

// 默认选项
Loading.show()

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

Loading.hide()

默认选项

定制化

内容净化

多组并行

v1.20+

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

显然，我们一次只能显示一个组，因此它们的生成顺序决定了它们的显示优先级（最后一个组的优先级高于前一个组；后进先出）。

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

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

/**
 * First way
 */

// we spawn the group
const myLoadingGroup = Loading.show({
  group: 'my-group',
  message: 'Some message'
})

// with params, so we update this group
myLoadingGroup({ message: 'Second message' })

// no params, so we instruct Quasar to hide the group
myLoadingGroup()

/**
 * Second, equivalent way
 */

// we spawn the group
Loading.show({
  group: 'my-group',
  message: 'Some message'
})

// we update the group (in this case we need to specify the group name)
Loading.show({
  group: 'my-group'
  message: 'Second message'
})

// we hide this specific group
Loading.hide('my-group')

设置默认值

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