useNProgress

類別

@Integrations

導出大小

448 B

Package

@vueuse/integrations

最後更改

5 days ago

用於 nprogress 的響應式封裝器。

範例

source

點擊以更改進度狀態

可在 @vueuse/integrations 附加元件中使用。

安裝

bash

npm i nprogress@^0

用法

import { useNProgress } from '@vueuse/integrations/useNProgress'

const { isLoading } = useNProgress()

function toggle() {
  isLoading.value = !isLoading.value
}

傳遞進度百分比

您可以傳遞一個百分比來指示進度條應該從哪裡開始。

import { useNProgress } from '@vueuse/integrations/useNProgress'

const { progress } = useNProgress(0.5)

function done() {
  progress.value = 1.0
}

要更改進度百分比，請設置 progress.value = n，其中 n 是介於 0..1 之間的數字。

自訂

只需編輯 nprogress.css 以符合您的喜好。提示：您可能只想查找並替換 #29d 的出現次數。

您可以通過傳遞一個對象作為第二個參數來配置它。

import { useNProgress } from '@vueuse/integrations/useNProgress'

useNProgress(null, {
  minimum: 0.1,
  // ...
})

類型宣告

typescript

export type UseNProgressOptions = Partial<NProgressOptions>
/**
 * Reactive progress bar.
 *
 * @see https://vueuse.dev.org.tw/useNProgress
 */
export declare function useNProgress(
  currentProgress?: MaybeRefOrGetter<number | null | undefined>,
  options?: UseNProgressOptions,
): {
  isLoading: WritableComputedRef<boolean, boolean>
  progress: Ref<number | null | undefined, number | null | undefined>
  start: () => nprogress.NProgress
  done: (force?: boolean) => nprogress.NProgress
  remove: () => void
}
export type UseNProgressReturn = ReturnType<typeof useNProgress>