Vue中使用NProgress實現進度條

簡介

NProgress是頁面跳轉或者發生異步請求是瀏覽器頂部的進度條

GitHub地址：https://github.com/rstacruz/nprogress

在線演示地址：http://ricostacruz.com/nprogress/

 

效果如下：

 

 

 

安裝

## 1.使用 npm 或者 yarn 安裝及可

① npm install --save nprogress 
② yarn add nprogress

兩種任選一種安裝

## 2.用法

NProgress.start(); //進度條出現
NProgress.done();  //進度條消失

 

使用

 

*** 路由文件中導入，頁面跳轉出現進度條（router.js）

## 1.導入 （導入文件可以是 路由文件 也可以是 異步請求文件）

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

## 2.使用

router.beforeEach((to, from, next) => {
　//出現進度條
  NProgress.start()
  next()
})

router.afterEach(() => {
  //進度條消失
  NProgress.done()
}

 

 

*** 異步請求文件中導入，發送請求出現進度條（這里使用 axios 發送請求）

** axios 手冊地址 **

## 1.導入

// 引入nprogress插件

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

## 2.使用

// 添加請求攔截器
axios.interceptors.request.use(function (config) {
　　// 出現進度條
    NProgress.start()return config
}, function (error) {
    // Do something with request error
    return Promise.reject(error)
})

// 在 response 攔截器中，隱藏進度條 NProgress.done()
axios.interceptors.response.use(config => {
    NProgress.done()
    return config
})

 

 

NProgress配置

## 1.showSpinner：進度環顯示隱藏

NProgress.configure({showSpinner: false});

## 2.ease：調整動畫設置，ease可傳遞CSS3緩沖動畫字符串（如ease、linear 等）。speed為動畫速度（單位ms）

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

## 3.minimum：最低百分比

NProgress.configure({minimum:0.3});

## 4.百分比：通過設置progress的百分比，調用 .set(n)來控制進度，其中n的取值范圍為0-1。

NProgress.set(0.4);

 

 

VUE中修改進度條顏色

在App.vue中的style中增加：

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

 

 

 

特此聲明：如需轉載請注明出處，如有疑問請及時提出以便於改正，如有侵權，聯系刪除，謝謝