Vue中使用NProgress实现进度条

2019/04/10 10:10
阅读数 89

简介

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

 

 

 

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

 

 

原文出处:https://www.cnblogs.com/CGWTQ/p/12357047.html

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部