跳到主要内容

useNProgress

分类
导出大小
531 B
@vueuse/integrations
上次更改
8 个月前

nprogress 的响应式封装。

演示

点击更改进度状态
可在 @vueuse/integrations 插件中使用。

安装

bash
npm i nprogress@^0

用法

ts
import { 
useNProgress
} from '@vueuse/integrations/useNProgress'
const {
isLoading
} =
useNProgress
()
function
toggle
() {
isLoading
.
value
= !
isLoading
.
value
}

传递进度百分比

你可以传递一个百分比来指示进度条应该从哪里开始。

ts
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 的出现。

你可以通过将一个对象作为第二个参数传递来配置它。

ts
import { 
useNProgress
} from '@vueuse/integrations/useNProgress'
useNProgress
(null, {
minimum
: 0.1,
// ... })

类型声明

ts
export type 
UseNProgressOptions
=
Partial
<
NProgressOptions
>
/** * Reactive progress bar. * * @see https://vueuse.org.cn/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
>

来源

源码演示文档

贡献者

Anthony Fu
Anthony Fu
Antério Vieira
SerKo
IlyaL
Robin
IlyaL
Robin
Robert Soriano
Doctorwu
丶远方
Agénor Debriat
webfansplz
Curt Grimes
Jelf
Michael Hüneburg
Alex Kozack

更新日志

v12.8.0
7432f - feat(types): 废弃 MaybeRefMaybeRefOrGetter,转而使用 Vue 的原生类型 (#4636)
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)

根据 MIT 许可证发布。