nprogress进度条的安装与使用

NProgress 是一个轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中
npm官网链接 https://www.npmjs.com/package/nprogress

1、安装命令

npm

npm install --save nprogress 
1

CDN

 - https://unpkg.com/nprogress@0.2.0/nprogress.js
 - https://unpkg.com/nprogress@0.2.0/nprogress.css
1
2

引入
script标签

<!-- 进度条 -->
<script src='nprogress.js'></script>
<!-- 样式必须引入 -->
<link rel='stylesheet' href='nprogress.css'/>
1
2
3
4

模块引入

import NProgress from 'nprogress' // 进度条
import 'nprogress/nprogress.css' //样式必须引入
1
2

2、使用方法

基础用法
简单的调用start()和done()控制进度条

NProgress.start();
NProgress.done();
1
2

高级用法
通过set(n)方法来设置百分率进度条，这里的n是从0到1的数字

NProgress.set(0.0);      // 与.start（）
NProgress.set(0.4);
NProgress.set(1.0);     //与.done（）相同
1
2
3

递增
可以使用inc()随机增长进度，注意，这个方法永远不会达到100%

NProgress.inc();
1

如果要增加特定值，可以将其作为参数传递

NProgress.inc(0.2);     //这将获得当前状态值并加0.2，直到状态为0.994
1

强制完成
通过使用done()让进度条关闭

NProgress.done(true);
1

3、NProgress 配置

NProgress.configure({
    easing: 'speed',  // 动画方式    
    speed: 500,  // 递增进度条的速度    
    showSpinner: false, // 是否显示加载ico    
    trickleSpeed: 200, // 自动递增间隔    
    minimum: 0.3 // 初始化时的最小百分比
});
1
2
3
4
5
6
7

4、vue中修改nprogress进度条颜色

在App.vue中的style中增加

#nprogress .bar {
    background: red !important; //自定义颜色
}
1
2
3