加载是一个功能，您可以使用它在应用程序内容的顶部显示一个带有加载动画的覆盖层，以告知用户正在进行后台操作。无需在页面中为全局后台操作添加复杂的逻辑。
// quasar.config file
return {
framework: {
plugins: [
'Loading'
],
config: {
loading: /* look at QuasarConfOptions from the API card */
}
}
}内容粘贴
用法
加载使用延迟 (500ms) 来显示自身，以便快速操作不会使屏幕闪烁。这是通过显示然后快速隐藏进度加载动画来实现的，而用户没有机会看到发生了什么。显示之前的延迟消除了混淆。
在 Vue 组件内部
import { useQuasar } from 'quasar'
setup () {
const $q = useQuasar()
$q.loading.show({
delay: 400 // ms
})
$q.loading.hide()
}内容粘贴
在 Vue 组件外部
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()内容粘贴
默认选项
自定义
内容清理
多个组并行v2.8+
提示
当您有多个并行发生的进程时，您可以对加载实例进行分组，以便您可以按组（分别）管理加载状态。
在生成每个加载实例时指定 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')内容粘贴
警告
请记住，调用 Loading.hide() 且不带参数将隐藏所有组。因此，如果您使用组，您可能希望始终使用组名称调用 hide() 方法。
设置默认值
如果您希望设置一些默认值，而不是每次都指定它们，您可以通过使用 quasar.config 文件 > framework > config > loading: {…} 或通过调用 Loading.setDefaults({...}) 或 $q.loading.setDefaults({...}) 来做到这一点。