nprogress进度条的使用
nprogress进度条的使用
文章目录
- 一、安装所需的包
- 二、使用步骤
- 1.引入
- 2.使用
- 3.修改样式
- 总结
一、安装所需的包
在项目文件打开终端
npm i nprogress --save
二、使用步骤
1.引入
在axios二次封装的文件下导入
代码如下(示例):
// 导入nprogress
import nprogress from 'nprogress'
// 引入进度条样式
import 'nprogress/nprogress.css'
2.使用
在请求拦截器使进度条开始动
代码如下(示例):
// 进度条开始动nprogress.start(),
在响应拦截器成功下使进度条结束:
// 进度条结束nprogress.done(),
二次封装代码如下:
这里侧重于写在什么位置!参考axios的二次封装可以了解:
https://blog.csdn.net/The_more_more/article/details/124206639
import axios from 'axios'
import { Message } from 'element-ui'// 引入进度条
import nprogress from 'nprogress'// 引入进度条的样式
import 'nprogress/nprogress.css'const service = axios.create({baseURL: 'http://127.0.0.1:3030',timeout: 5000,withCredentials: false // 表示跨域请求时是否需要使用凭证
})// 请求拦截器
service.interceptors.request.use((config) => {// 进度条开始动nprogress.start()return config},(error) => {console.log(error)return Promise.reject(error)}
)// 响应拦截器
service.interceptors.response.use((response) => {// 进度条结束nprogress.done()return response.data},(error) => {console.log('err' + error)Message({message: error.message,type: 'error',duration: 5 * 1000})return Promise.reject(error)}
)export default service
3.修改样式
如果想修改进度条的样式,我们需要找到nprogress.css文件,找到#nprogress .bar的选择器,去修改喜欢的颜色
总结
以上就是今天要讲的内容,本文仅仅简单介绍了nprogress的使用,详细内容可以参考:https://madewith.cn/23
nprogress进度条的使用相关推荐
- NProgress 进度条
NProgress 实现进度条 NProgress 是浏览器加载时,出现在浏览器顶部的进度条. 参考文章@小丶侯 参考文章@CEZLZ 一.安装 npm install --save nprogres ...
- vue——Nprogress进度条功能实现
下图中的这种顶部进度条是非常常见的,在vue项目中有对应的插件.Nprogress Nprogress进度条的使用方法如下: 1.安装nprogress插件 npm install --save np ...
- 插件——nprogress进度条
一,安装 npm install nprogress --save npm install nprogress --save 二,在需要使用的页面引入 这里也要引入axios 在请求拦截器的时候使用 ...
- VUE项目--nprogress进度条
安装 npm install --save nprogress 引入 在src/api/requests.js文件中引入 // 引入进度条 import nprogress from 'nprogre ...
- Vue使用NProgress进度条 zindex
1.安装 npm i -S nprogress 2.在router.js中使用 import Vue from 'vue' import Router from 'vue-router' import ...
- NProgress进度条
vue项目中使用的一个进度条插件. 安装 使用第三方插件NProgress,添加页面顶部进度条. 使用npm下载: npm install --save nprogress//main.js中进行如下 ...
- vue nprogress进度条插件介绍
实现效果如下: 安装: npm install –save nprogress 用法: //vue中引用 import NProgress from 'nprogress' import 'nprog ...
- Vue.js中使用nprogress进度条
安装 npm install --save nprogress 简单使用 router目录下,index.js 引入 import NProgress from 'nprogress' import ...
- nprogress 进度条插件使用
每次路由跳转时进行加载,显示在页面最上方,代码书写位置在路由前置守卫里,守卫开始时显示进度条,结束后隐藏 GitHub - rstacruz/nprogress: For slim progress ...
最新文章
- 张一鸣:10年面试2000人,我发现混得好的人,全都有同一个特质
- 百度无人驾驶出租长沙开测:Apollo技术一汽红旗车队,年内服役
- Python笔记_第四篇_高阶编程_正则表达式_3.正则表达式深入
- TIMESTAMP 与 explicit_defaults_for_timestamp
- linux粘着位的使用(t权限)
- Centos升级Python2.7.12
- Linux内核调试sysfs
- C#图解教程 第十三章 委托
- 职工考勤管理信息系统数据库课设_职工考勤管理信息系统数据库课程设计
- leetcode 84 python
- Pandas一些小技巧
- 李向阳教授谈中科大AI承继与挑战,IT校友影响力惊人
- python提取全部个股数据_Python 股票历史数据的获取
- java摇两个色子代码_[代码全屏查看]-html5+原生js实现的一个简易双色子游戏
- 1046 划拳 (15分)
- MPC-HC/MPC-BE/LAV Filter等播放器相关
- 七夕情人节生日节日表白网页,不是程序员也会用~
- 0人报名!清华转专业20+学科无人问津引热议,网友:一切为了吃饭
- mkfs fat32 卷标 linux,fdisk_mkfs分区格式化课件.pdf
- 完全用 GNU/Linux 工作(转)