Loading 是一個功能，您可以使用它在 App 的內容頂部顯示帶有旋轉器的覆蓋層，以告知使用者正在進行背景作業。 全域背景操作無需在您的頁面中新增複雜的邏輯。
// quasar.config file
return {
framework: {
plugins: [
'Loading'
],
config: {
loading: /* look at QuasarConfOptions from the API card */
}
}
}content_paste
用法
Loading 使用延遲 (500 毫秒) 來顯示自身，以便快速操作不會使螢幕閃爍。 這是透過顯示然後快速隱藏進度旋轉器來實現的，使用者沒有機會看到發生了什麼。 顯示前的延遲消除了混淆。
在 Vue 元件內
import { useQuasar } from 'quasar'
setup () {
const $q = useQuasar()
$q.loading.show({
delay: 400 // ms
})
$q.loading.hide()
}content_paste
在 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()content_paste
預設選項
自訂
內容清理
多個群組並行v2.8+
提示
當您有多個並行發生的程序時，您可以將 Loading 實例分組，以便您可以管理每個群組的 Loading 狀態 (個別管理)。
在產生每個 Loading 實例時，指定 group 屬性，您可以使用傳回的函式來更新或隱藏它們。
顯然，我們一次只能顯示一個群組，因此它們產生的順序決定了它們顯示的優先順序 (最後一個優先於前一個；LIFO)。
您可以透過傳回的函式來顯示/更新/隱藏群組，或者只是呼叫 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')content_paste
警告
請記住，呼叫不帶參數的 Loading.hide() 將會隱藏所有群組。因此，如果您使用群組，您可能需要始終使用群組名稱呼叫 hide() 方法。
設定預設值
如果您希望設定一些預設值，而不是每次都指定它們，您可以透過使用 quasar.config 檔案 > framework > config > loading: {…} 或呼叫 Loading.setDefaults({...}) 或 $q.loading.setDefaults({...}) 來完成。