NProgress 的使用

NProgress 是前端轻量级 web 进度条插件

安装

NPM

npm install nprogress --save

或

yarn add nprogress

CDN

https://unpkg.com/nprogress@0.2.0/nprogress.js

https://unpkg.com/nprogress@0.2.0/nprogress.css

基本使用

NProgress 一般搭配路由守卫使用

import NProgress from 'nprogress'   // 导入 nprogress
import '@/components/NProgress/nprogress.less'   // 导入样式，否则看不到效果

NProgress.configure({ showSpinner: true })   // 显示右上角螺旋加载提示

router.beforeEach((to, from, next) => { 
    NProgress.start()   // 开启进度条
    // some code ...
    NProgress.done()   // 关闭进度条
})

效果

API 说明

NProgress.start()

作用：开启进度条

NProgress.done()

作用：关闭进度条

NProgress.set(n)

作用：设置进度条的百分比，其中 n 是 0 ~ 1 之间的数字。

NProgress.inc()

作用：以随机量递增进度条，但永远不会达到 100%。

常见配置

minimum

作用：进度条开始时的百分比（默认0.08）

showSpinner

作用：是否显示右上角螺旋加载提示

parent

作用：设置父容器（默认body）

NProgress.configure({
    minimum: 0.08,
    showSpinner: true,
    parent: '#box1'
})