element-ui框架進度條nprogress

安裝：npm install --save nprogress

引入：（在axios封裝文件中引入）

　　import NProgress from 'nprogress'

　　import 'nprogress/nprogress.css'

開啟和關閉：（分別在axios的請求攔截器和響應攔截器中使用start()和done()）

　　NProgress.start();

　　NProgress.done();

 

還可以在路由表中引入，全局前置守衛開啟，全局后置守衛關閉：

 

進度環隱藏：NProgress.configure({showSpinner: false});

調整動畫設置：NProgress.configure({ease:'ease',speed:500});   

　　動畫類型有：ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier

設置最低百分比：NProgress.configure({minimum:0.3});

.set()控制進度，取值范圍為0-1：NProgress.set(0.4);

 

 

 

自定義進度條顏色：（App.vue）

#nprogress .bar {
  background: red !important; //自定義顏色
  height: 10px;
}