簡介：NProgress 是瀏覽器加載時(shí)，出現(xiàn)在瀏覽器頂部的進(jìn)度條。

文章目錄：

一、NProgress 安裝

二、NProgress 使用

三、NProgress 配置

四、Vue 中修改進(jìn)度條顏色

一、NProgress 安裝

1、使用 npm 或者 yarn 安裝及可

npm install --save nprogress

yarn add nprogress

任選一種安裝

2、用法

NProgress.start(); //進(jìn)度條出現(xiàn)

NProgress.done(); //進(jìn)度條消失

二、NProgress 使用

1、路由文件中導(dǎo)入，頁面跳轉(zhuǎn)出現(xiàn)進(jìn)度條

入口文件 main.js 引入 nprogress

import App from './App'

import VueRouter from 'vue-router'

import router from './router' // 路由配置文件

//引入 nprogress

import NProgress from 'nprogress' // 進(jìn)度條

import 'nprogress/nprogress.css' // 引入樣式

Vue.use(VueRouter)

// 簡單配置

NProgress.inc(0.2)

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

// 進(jìn)度條開始

router.beforeEach((to,from,next) => {

NProgress.start()

next()

})

// 進(jìn)度條結(jié)束

router.afterEach(() => {

NProgress.done()

})

new Vue({

el: '#app',

router,

render: h => h(App)

})

2、寫在 axios 的請(qǐng)求攔截器和響應(yīng)攔截器里，每次只要觸發(fā) axios 請(qǐng)求就加載進(jìn)度條

// axios 請(qǐng)求攔截器

axios.interceptors.request.use(

config => {

NProgress.start() // 加載進(jìn)度條開始

return config

},

error => {

return Promise.reject(error)

}

)

// 在 response 攔截器中，隱藏進(jìn)度條 NProgress.done()

axios.interceptors.response.use(

response => {

NProgress.done() // 加載進(jìn)度條結(jié)束

return response

},

error => {

return Promise.reject(error)

}

)

三、NProgress 配置

1、showSpinner：進(jìn)度環(huán)顯示隱藏

NProgress.configure({showSpinner: false});

2、ease：調(diào)整動(dòng)畫設(shè)置，ease可傳遞CSS3緩沖動(dòng)畫字符串(如ease、linear 等)。speed為動(dòng)畫速度(單位ms)

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

3、minimum：最低百分比

NProgress.configure({minimum:0.3});

4、百分比：通過設(shè)置progress的百分比，調(diào)用 .set(n)來控制進(jìn)度，其中n的取值范圍為0-1。

NProgress.set(0.4);

四、Vue 中修改進(jìn)度條顏色

在App.vue中的style中增加：

#nprogress .bar {

background: red !important; //自定義顏色

}

總結(jié)

以上是生活随笔為你收集整理的vue实现进度条隐藏_Vue 中使用 NProgress 实现进度条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。