vue中进度条写法_Vue中使用NProgress实现进度条

简介

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 发送请求)

## 1.导入

//引入nprogress插件

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

## 2.使用

//添加请求拦截器

axios.interceptors.request.use(function(config) {

// 出现进度条

NProgress.start()returnconfig

},function(error) {//Do something with request error

returnPromise.reject(error)

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

axios.interceptors.response.use(config =>{

NProgress.done()returnconfig

})

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;//自定义颜色}

特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢