NProgress 使用

标签：进度条 ease next start done 使用 NProgress

简单使用案例一

一、安装NProgress包

方法一： npm install --save nprogerss
方法二： yarn add nprogress
方法三：在图形化界面中搜索nprogress安装运行依赖
方法四：直接引入js、css或者通过cdn引入。
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

二、导入 NProgress 包对应的JS和CSS

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

三、在 request 拦截器中，展示进度条 NProgress.start()

axios.interceptors.request.use(config => {
    NProgress.start()
    config.headers.Authorization = window.sessionStorage.getItem('token')
    // 在最后必须 return config
    return config
})

四、在 response 拦截器中，隐藏进度条 NProgress.done()

axios.interceptors.response.use(config => {
    NProgress.done()
    // 在最后必须 return config
    return config
})

案例二、在vue的路由跳转中使用和修改nprocess的进度条颜色

一、在下面声明完router(const router = new VueRouter({......}))后面写上路由钩子函数如下所示。

router.beforeEach((to, from, next) => {
    NProgress.start(); //开启进度条
    //中间写其他的项目中所需要的一些代码，例如有些网页只有登录了才能进，在这里可以做出判断，判断完了满足要求后就可以放行 next()
    next();
});

router.afterEach(() => {
    NProgress.done(); //完成进度条
});

二、基本上会这几个api就足够了，我们用的最多的就是这几个，NProgress.start()开启进度条，NProgress.done()完成进度条，如果我们想改变进度条的颜色，可以进入App.vue里，在style中加上下面这样几行代码即可。

#nprogress .bar {
    background: blue !important;    //这里可以随便写颜色
}

如图所示，这样一个进度条就完成了

NProgress 使用_进度条

三、在vue-next-admin-js中就是这样使用的

// 路由加载前
router.beforeEach(async (to, from, next) => {
	// NProgress显示右上角螺旋加载提示
	NProgress.configure({ showSpinner: false });
	if (to.meta.title) NProgress.start();
	const token = Session.get('token');
	if (to.path === '/login' && !token) {
		next();
		NProgress.done();
	} else {
		if (!token) {
			next(`/login?redirect=${to.path}¶ms=${JSON.stringify(to.query ? to.query : to.params)}`);
			Session.clear();
			NProgress.done();
		} else if (token && to.path === '/login') {
			next('/home');
			NProgress.done();
		} else {
			const storesRoutesList = useRoutesList(pinia);
			const { routesList } = storeToRefs(storesRoutesList);
			if (routesList.value.length === 0) {
				if (isRequestRoutes) {
					// 后端控制路由：路由数据初始化，防止刷新时丢失
					await initBackEndControlRoutes();
					// 解决刷新时，一直跳 404 页面问题，关联问题 No match found for location with path 'xxx'
					// to.query 防止页面刷新时，普通路由带参数时，参数丢失。动态路由（xxx/:id/:name"）isDynamic 无需处理
					next({ path: to.path, query: to.query });
				} else {
					// https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP
					await initFrontEndControlRoutes();
					next({ path: to.path, query: to.query });
				}
			} else {
				next();
			}
		}
	}
});

// 路由加载后
router.afterEach(() => {
	NProgress.done();
});

// 导出路由
export default router;

其他资料和API介绍

GitHub地址

https://github.com/rstacruz/nprogres

演示网站

https://ricostacruz.com/nprogress/

API介绍

只需要调用start()和done()来控制进度条

NProgress.start();  // 开始加载
NProgress.done();  // 加载完成

NProgress还提供了其他几个方法，如设置百分比，调用.set(n)来控制进度，其中n的取值范围为0-1。调用.inc()产生一个随机增量这将永远不会达到100％：将其用于每个图像加载（或类似加载）。通过传递 true 参数给done()，使进度条满格，强制完成。

NProgress.set(0.0);     // Sorta same as .start()
NProgress.set(0.4);     // 要设置进度百分比
NProgress.set(1.0);     // Sorta same as .done()

NProgress.inc();        // 递增-递增进度条 如果要增加特定值，可以将其作为参数传递
NProgress.inc(0.2);     // 这将获取当前状态值并添加0.2直到状态为0.994   
// 传递true到done()，即使未显示进度条也将显示进度条。（默认 如果.start()不调用，.done()*不会做任何事情） 
NProgress.done(true);   // 强制完成
// 获取状态值 要获取状态值，请使用.status
NProgress.status

实际使用中，我们一般在Ajax或者Pjax加载时，调用NProgress。你可以在jQuery提供的Ajax，或者使用Pjax，或者在其他框架如Vue.js中都可以很好的使用NProgress。

这里我们示例演示使用Ajax方法请求远程数据，然后调用进度条加载的过程。

$('#loading').on('click', function(event) {
    event.preventDefault();
    NProgress.start();
    $.get('data.php', function(data) {
        $('#msg').html(data);
        NProgress.done();
    });
});

参数配置

minimum-最小值

设置开始时最低百分比，默认是0.08。

NProgress.configure({ minimum: 0.1 });

template-模板

改变进度条的HTML结构。为了保证进度条正常工作，需要一个包含role='bar' 属性的元素。

NProgress.configure({
  template: "<div class='....'>...</div>"
});

ease和speed-CSS动画属性

ease可传递CSS3缓冲动画字符串（如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier）。speed为动画速度（默认200，单位ms）。使用缓动（CSS缓动字符串）和速度（以毫秒为单位）调整动画设置。（默认：ease和200）

NProgress.configure({ easing: 'ease', speed: 500 });

trickle-自动递增

通过将此设置为来关闭自动递增行为false , 是否显示进度条，默认：true

NProgress.configure({ trickle: false });

进度条增加幅度和频率 trickleSpeed trickleRate

设置每次进度条步进速度（ms）。单位分别是百分比、毫秒

NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });

showSpinner

是否显示环形进度动画，默认true。

NProgress.configure({ showSpinner: false });

parent -父级容器

指定改变的父容器，默认body。

NProgress.configure({ parent: '#container' });

定制化

当然，你也可以修改nprogress.css以达到你想要的进度条外观，比如改变进度条背景颜色、高度等等。

标签：进度条,ease,next,start,done,使用,NProgress
From： https://blog.51cto.com/lenglingx/8236896