一、前语
用过的所有进度条中,还是觉得这个非常的奥利给!
二、用法
安装(npm)
npm install --save nprogress
基本用法
- 显示进度条-
NProgress.start()
- 设置百分比-
NProgress.set()
- 增加一点点-
NProgress.inc()
- 结束进度条-
NProgress.done()
基本配置
- 通过 minimum 来修改最小百分比-
NProgress.configure({ minimum: 0.1 })
- 通过 ease(一个 CSS 中的 easing 值) 调整动画设置和速度 speed (毫秒ms)-
NProgress.configure({ ease: 'ease', speed: 500 })
- 关闭进度条步进,设置 trickle 为 false-
NProgress.configure({ trickle: false })
- 调整 trickleRate (每次步进增长多少) 和 trickleSpeed (步进间隔,单位毫秒ms)-
NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 })
- 禁用进度环,设置 showSpinner 为false-
NProgress.configure({ showSpinner: false })
三、配合Axios(部分代码)
//导入封装axios的文件
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
//配置进度条参数
NProgress.configure({ showSpinner: false, minimum: 0.2, easeing: 'swing', speed: 1000, trickleRate: 0.2 });
//防止多次请求进度条重复加载
let loadingNum = 0;
function startLoading() {
if (loadingNum == 0) {
NProgress.start()
}
loadingNum++;
}
function endLoading() {
loadingNum--
if (loadingNum <= 0) {
NProgress.done()
}
}
// 请求拦截
axios.interceptors.request.use(
config => {
// 加载进度条
startLoading()
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截
axios.interceptors.response.use(
response => {
//结束进度条
endLoading()
return response;
},
error => {
return Promise.reject(error);
}
);
Tips:如果想修改进度条颜色,可在app.vue样式中加入 #nprogress .bar { background: #F8C23B !important; }