LoadingBar | Quasar Framework

LoadingBar

Quasar LoadingBar 外掛程式提供一個簡單的方式來為您的應用程式設定 QAjaxBar，如果您不想自己處理 QAjaxBar 元件的話。

如需示範，請訪問 QAjaxBar 文件頁面。

Quasar CLI

Vite 外掛程式 / Vue CLI

UMD

// quasar.config file

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

LoadingBar 選項與設定 QAjaxBar 時相同。

警告

當使用 Quasar 的 UMD 版本時，所有元件、指令和外掛程式預設都會安裝。這包含 LoadingBar。如果您希望停用它，請指定 loadingBar: { skipHijack: true } (這會關閉監聽 Ajax 流量)。

用法

在 Vue 元件內部

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.loadingBar.start()
  $q.loadingBar.stop()
  $q.loadingBar.increment(value)
}

在 Vue 元件外部

import { LoadingBar } from 'quasar'

LoadingBar.start()
LoadingBar.stop()
LoadingBar.increment(value)

設定預設值

如果您希望設定一些預設值，而不是每次都指定它們，您可以使用 quasar.config 檔案 > framework > config > loadingBar: {…} 或呼叫 LoadingBar.setDefaults({...}) 或 $q.loadingBar.setDefaults({...})。支援所有 QAjaxBar 屬性。

在 Vue 元件內部

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.loadingBar.setDefaults({
    color: 'purple',
    size: '15px',
    position: 'bottom'
  })
}

在 Vue 元件外部 (包含啟動檔案)

import { LoadingBar } from 'quasar'

LoadingBar.setDefaults({
  color: 'purple',
  size: '15px',
  position: 'bottom'
})

使用 Ajax 過濾器
v2.4.5+

如果您只想為某些 URL 觸發 LoadingBar，那麼您可以使用 setDefaults() 方法 (如上所述) 來設定 hijackFilter 屬性

import { LoadingBar } from 'quasar'

LoadingBar.setDefaults({
  // return a Boolean which has the meaning of
  // "does this URL should trigger LoadingBar?"
  hijackFilter (url) {
    // example (only https://my-service.com/* should trigger)
    return /^https:\/\/my-service\.com/.test(url)
  }
})

發現錯誤？在瀏覽器中編輯此頁面

1. 簡介

2. LoadingBar API

3. 安裝

4. 用法

4.1. 設定預設值

4.2. 使用 Ajax 過濾器

用法

設定預設值

使用 Ajax 過濾器v2.4.5+

使用 Ajax 過濾器
v2.4.5+