花都区建设局网站,江西中企动力做的网站,深圳创业补贴政策2024最新,网站购物流程模块怎么实现React项目使用NProgress作为加载进度条 0、效果1、react安装依赖2、使用3.进度条颜色设置 文档参考#xff1a;https://zhuanlan.zhihu.com/p/616245086?utm_id0
0、效果
如下#xff0c;可全局在页面顶部有一条进度条
1、react安装依赖
yarn add nprogress通过以上安装… React项目使用NProgress作为加载进度条 0、效果1、react安装依赖2、使用3.进度条颜色设置 文档参考https://zhuanlan.zhihu.com/p/616245086?utm_id0
0、效果
如下可全局在页面顶部有一条进度条
1、react安装依赖
yarn add nprogress通过以上安装后将在react项目的package.json中增加对应的依赖比如我的项目中安装后多了如下依赖
nprogress: ^0.2.0,2、使用
import NProgress from nprogress // 引入nprogress插件
import nprogress/nprogress.css // 这个nprogress样式必须引入NProgress.start();
NProgress.done();以上用法可以在项目中的各个组件中使用但最好是有个地方全局引入比如我的项目中在全局的接口请求文件axios.js中使用。axios.js中有全局拦截请求前和请求后的代码那这里引入最合适了。
axios.js部分内容
// NProgress 进度条和样式
import NProgress from nprogress;
import nprogress/nprogress.css;// request interceptor
axios.interceptors.request.use(config {// 请求时开启进度条NProgress.start();//...其他代码},error {// 异常时也关闭进度条NProgress.done();//...其他代码}
);// response interceptor
axios.interceptors.response.use(response {// 响应成功关闭进度条NProgress.done();//...其他代码},error { // 异常时也关闭进度条NProgress.done();// 其他代码...}
);3.进度条颜色设置
写全局样式即可比台在全局样式文件index.less中加入以下样式修改进度条颜色
// 全局顶部进度条颜色
#nprogress .bar {background: #4096ff !important; //自定义颜色
}
