加载功能可用于在应用内容上方显示带有旋转按钮的叠加层，以通知用户正在进行后台操作。无需在页面中添加复杂的全局后台操作逻辑。

¥Loading is a feature that you can use to display an overlay with a spinner on top of your App’s content to inform the user that a background operation is taking place. No need to add complex logic within your Pages for global background operations.

// quasar.config file

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

用法(Usage)

¥Usage

加载功能会延迟（500 毫秒）显示，以确保快速操作不会导致屏幕闪烁。这通过显示然后快速隐藏进度条来实现，使用户无法看到发生了什么。显示前的延迟消除了混淆。

¥Loading uses a delay (500ms) to display itself so that quick operations won’t make the screen flicker. This happens by showing and then quickly hiding the progress spinner without the user having a chance to see what happens. The delay before showing it eliminates confusion.

在 Vue 组件内部：

¥Inside a Vue component:

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

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

  $q.loading.hide()
}

Vue 组件之外：

¥Outside of a Vue component:

import {
  Loading,

  // optional!, for example below
  // with custom spinner
  QSpinnerGears
} from 'quasar'

// default options
Loading.show()

// fully customizable
Loading.show({
  spinner: QSpinnerGears,
  // other props
})

Loading.hide()

默认选项(Default options)

¥Default options

自定义(Customization)

¥Customization

内容清理(Content sanitization)

¥Content sanitization

并行多个组

v2.8+

(Multiple groups in parallel

v2.8+

)

¥Multiple groups in parallel

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

¥Specify the group property when spawning each of your Loading instances and you can update or hide them by using the returned function.

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

¥Obviously, we can only display one group at a time, so the order in which they are spawned determines the priority in which they are shown (the last one has priority over the previous ones; LIFO).

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

¥You can play with the returning function to show/update/hide the group or just call Loading.show({ group: '..group_name..', ... }) or Loading.hide('..group_name..').

以下两种方式完全等效（你甚至可以混合使用它们）：

¥The following two ways are perfectly equivalent (and you can even mix the calls between them):

/**

 * 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')

设置默认值(Setting Up Defaults)

¥Setting Up Defaults

如果你希望设置一些默认值，而不是每次都指定它们，你可以使用 quasar.config 文件 > 框架 > 配置 > 加载：{…} 或者调用 Loading.setDefaults({...}) 或 $q.loading.setDefaults({...})。

¥Should you wish to set up some defaults, rather than specifying them each time, you can do so by using quasar.config file > framework > config > loading: {…} or by calling Loading.setDefaults({...}) or $q.loading.setDefaults({...}).