加载(Loading)

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

安装

编辑 /quasar.conf.js:

framework: {
  plugins: ['Loading']
}

基本用法

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

显示加载

在Vue组件中：

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

在Vue组件之外：

import {
  Loading,

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

// 默认选项
Loading.show()

// 使用自定义延迟
Loading.show({
  delay: 300 // 毫秒
})

// 可定制（适用于所有可用属性）
Loading.show({
  spinner: QSpinnerGears,
  message: 'Some message',
  messageColor: 'blue',
  spinnerSize: 250, // 像素
  spinnerColor: 'white',
  customClass : 'bg-primary'
})

隐藏加载

在Vue组件中：

this.$q.loading.hide()

在Vue组件之外：

import { Loading } from 'quasar'
Loading.hide()

检查状态

检查加载是否有效很容易。

在Vue组件中：

this.$q.loading.isActive

在Vue组件之外：

import { Loading } from 'quasar'
(Boolean) Loading.isActive

Ajax栏 内部加载