Vue里使用nprogress进度条

最新推荐文章于 2024-02-19 15:59:27 发布

青田。

最新推荐文章于 2024-02-19 15:59:27 发布

阅读量132

点赞数 1

分类专栏： JavaScript vue 文章标签： vue.js 前端 javascript 前端框架

本文链接：https://blog.csdn.net/Tianxiaoxixi/article/details/125077663

版权

JavaScript 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

vue

26 篇文章 3 订阅

订阅专栏

可以看这里： https://madewith.cn/23

一、安装

NPM

npm install --save nprogress

Yarn

yarn add nprogress

二、使用

main.js

// 导入 NProgress 包对应的JS和CSS
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'


// 在 request 拦截器中，展示进度条 NProgress.start()
axios.interceptors.request.use(config => {
  NProgress.start()
  return config
})
// 在 response 拦截器中，隐藏进度条 NProgress.done()
axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})

三、如何修改进度条颜色？？？

在NProgress.start();函数前，改变样式的颜色：

#nprogress .bar {
background: #29d !important;
}

四、如何添加一个自定义动画到进度条

你可以通过重写CSS样式来实现：

#nprogress .bar {
        top: 109px!important;
    }
#nprogress .spinner {
        top: 120px!important;
}

.peg {
        // replace this with your animation
        transform: rotate(0deg) translate(0px, -0px)!important;
 }