轻松上手使用 NProgress 进度条

简介: 轻松上手使用 NProgress 进度条

第一步:安装 NProgress

$ npm install --save nprogress

第二步:在main.js文件中导入 NProgress 包对应的JS和CSS

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

第三步:在拦截器中使用 NProgress.start()和NProgress.done()

// axios请求拦截
// 在 request 拦截器中,展示进度条 NProgress.start()
axios.interceptors.request.use(config => {
  // console.log(config)
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在最后必须 return config
  return config
})
// 在 response 拦截器中,隐藏进度条 NProgress.done()
axios.interceptors.response.use(config => {
  // console.log(config)
  NProgress.done()
  // 在最后必须 return config
  return config
})
目录
相关文章
|
7月前
|
移动开发 前端开发 JavaScript
uView LoadingIcon 加载动画
uView LoadingIcon 加载动画
126 1
|
8天前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。
|
11天前
|
前端开发 Java API
React 进度条组件 ProgressBar 详解
本文介绍了如何在 React 中创建进度条组件,从基础实现到常见问题及解决方案,包括动态更新、状态管理、性能优化、高级动画效果和响应式设计等方面,帮助开发者构建高效且用户体验良好的进度条。
38 18
|
4月前
Vue3进度条(Progress)
这是一个基于 Vue2 的进度条组件,支持线性 (`line`) 和圆形 (`circle`) 两种模式。可通过多种属性自定义进度条的样式和行为,包括宽度、进度百分比、颜色、线宽、线帽样式等。此外,还支持显示进度文本或图标,并允许通过插槽自定义内容。该组件提供了丰富的配置选项,适用于多种应用场景。
507 5
Vue3进度条(Progress)
|
4月前
|
JavaScript
Vue2进度条(Progress)
这篇文章介绍了如何在Vue 3框架中创建一个可自定义设置的进度条组件,包括进度条的宽度、当前进度、线条宽度和是否显示进度信息等属性。
152 2
Vue2进度条(Progress)
|
7月前
|
前端开发
前端进度条组件NProgress
前端进度条组件NProgress
90 1
前端进度条组件NProgress
|
7月前
|
移动开发 小程序 API
uniapp中uview组件库中丰富的LineProgress 线形进度条 的使用方法
uniapp中uview组件库中丰富的LineProgress 线形进度条 的使用方法
571 1
|
存储 JavaScript 前端开发
Vue实现圆环进度条
Vue实现圆环进度条
|
JavaScript
基于Vue封装酷炫进度条插件
基于Vue封装酷炫进度条插件
基于Vue封装酷炫进度条插件
|
JavaScript 前端开发 API
10分钟快速上手Vue3过渡动画
在实际开发中,为了增加用户体验,经常会使用到过渡动画,而过渡动画在CSS中是通过transition和animation实现的。而在Vue中,Vue本身中内置了一些组件和API可以帮助我们方便的实现过
313 0
10分钟快速上手Vue3过渡动画