加载插件 Loading

Loading（加载） 插件可以在您的页面上产生一个遮罩，并展示一个旋转的加载态，通知用户等待某个操作完成，避免在页面中添加复杂的加载逻辑。

Loading API

安装

// quasar.config.js

return {
  framework: {
    plugins: [
      'Loading'
    ],
    config: {
      loading: { /* 参考 API 卡片中的 QuasarConfOptions  */ }
    }
  }
}

用法

触发 Loading 后会延迟（500ms）再显示，保证了快速操作不会使屏幕闪烁。这是因为显示然后迅速隐藏进度条使得用户没有机会看到发生了什么。显示之前的延迟消除了混乱。

在 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()

// 自定义加载样式
Loading.show({
  spinner: QSpinnerGears,
  // 其他的属性
})

Loading.hide()

设置默认值

相较于每次使用时重新指定配置，您可能想为它们设置一些默认值，您可以通过 quasar.config.js > framework > config > loading: {…} 来配置全局的默认值，或者调用 Loading.setDefaults({...}) 或 $q.loading.setDefaults({...})来配置。

类型定义

export type QLoadingUpdateOptions = Omit<QLoadingShowOptions, "group">;