前端进度条组件NProgress

nprogress

  1. 安装
npm install --save nprogress
  1. 使用
import NProgress from 'nprogress' // 引入nprogress插件
import 'nprogress/nprogress.css'  // 这个nprogress样式必须引入
// axios请求拦截器
axios.interceptors.request.use(config => {NProgress.start() // 设置加载进度条(开始..)return config},error => {return Promise.reject(error)}
)
// axios响应拦截器
axios.interceptors.response.use(function(response) {NProgress.done() // 设置加载进度条(结束..)return response},function(error) {return Promise.reject(error)}
)

写在axios的请求拦截器和响应拦截器里,每次只要触发axios请求就加载进度条
或者网上很多人写在了router.beforeEach和router.afterEach,这种写法只能切换路由时才有效果。
个人感觉写在axios的请求拦截器和响应拦截器里比较好,因为切换路由一般都会触发页面的created()事件发起axios请求

//导入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'router.beforeEach((to, from, next) => {NProgress.start()next()
})
router.afterEach(() => {NProgress.done()
})

最好在index.html也写上,单页面首次打开速度慢,这样写打开登陆页时也才会显示!

<script>NProgress.start()// 给页面设置请求加载进度条效果window.onload = function() {NProgress.done()}
</script>

可以更改设置样式

配置NProgress:

  1. showSpinner:进度环显示隐藏
NProgress.configure({showSpinner: false});
  1. ease:调整动画设置,ease可传递CSS3缓冲动画字符串(如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier)。speed为动画速度(单位ms)。
NProgress.configure({ease:'ease',speed:500});
  1. minimum:设置最低百分比
NProgress.configure({minimum:0.3});
  1. 百分比:通过设置progress的百分比,调用 .set(n)来控制进度,其中n的取值范围为0-1。
NProgress.set(0.4);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/694439.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【学习心得】编程小白该如何学好C语言(✨新手推荐阅读)

前言 对于刚刚踏入编程领域的小白来说&#xff0c;C语言可能是一个既神秘又充满挑战的领域。但只要你掌握了正确的学习方法&#xff0c;C语言的学习之旅也可以是充满乐趣和成就感的。 一、明确学习目标 对于初学者来说&#xff0c;明确学习目标是学好C语言的第一步。一个清晰…

BIG DATA —— 大数据时代

大数据时代 [英] 维克托 迈尔 — 舍恩伯格 肯尼斯 库克耶 ◎ 著 盛杨燕 周涛◎译 《大数据时代》是国外大数据研究的先河之作&#xff0c;本书作者维克托迈尔舍恩伯格被誉为“大数据商业应用第一人”&#xff0c;他在书中前瞻性地指出&#xff0c;大数据带来的信息…

扩散模型+轨迹预测

目录 1. 基础知识2. 轨迹预测相关2.1 Leapfrog Diffusion Model2.2 MID2.3 中科院2.4 DICE2.5 MotionDiffuser2.6 DiffTraj 3. 练手时可参考4. 扩展&#xff1a;扩散模型RL 1. 基础知识 Stable diffusion扩散模型相关 Diffusion相关二 Diffusers是hugging face发起的用于专门…

Vue3引用第三方模块报错Could not find a declaration file for module ***.

在引用第三方的组件时候报错如下 原因是&#xff1a;该组件可能不是.ts文件而是.js文件 解决方案&#xff1a; 1.在Src的目录下面新建一个文件为shims-vue.d.ts的文件 2.文件内容为 declare module xxx&#xff0c;xxx就是你报错的模块 例如我这样 declare module vue3-pu…

单片机03--按键--寄存器版

GPIO端口相关寄存器&#xff08;STM32F40x芯片&#xff09; 目标&#xff1a; 开关KEY1控制开灯。 分析&#xff1a; KEY1---PA0--->输入---->浮空输入/下拉输入 KEY1不导通时&#xff0c;PA0输入为低电平&#xff0c;KEY1导通时&#xff0c;PA0输入为高电平。 实现…

Vue中 Runtime-Only和Runtime + Compiler的区别

在 Vue 项目中&#xff0c;Runtime-Only 和 Runtime Compiler 是两种不同的构建方式。 Runtime-Only&#xff08;仅运行时&#xff09;&#xff1a;在 Runtime-Only 构建中&#xff0c;Vue 库只包含运行时的代码&#xff0c;不包含模板编译器。。Runtime Compiler&#xff08…

Vue3-组合式Api(重点)

阅读文章你可以收获的知识 1.知道setup语法糖的使用和如何实现的 2.知道在vue3中如何定义响应式数据 3.知道在vue3中如何定义一个计算属性&#xff08;computed&#xff09; 4.知道如何在vue3中使用watch来监听数据 5.知道在vue3如何实现父子通信 6.知道vue3如何使用ref函…

BIM工程师认证相关信息

目录 背景 一、中国图学学会颁发的全国BIM技能等级考试证书 二、中国建设教育协会颁发的BIM证书 背景 BIM工程师证书是建筑信息模型证书&#xff0c;英文全称是Building Information Modeling。对于建筑工程从业人员来说&#xff0c;BIM证书可以证明个人的工作能力&#xf…

软件测试工程师linux学习之系统层面相关命令总结

1 linux系统重启和关机的命令 重启命令&#xff1a;reboot 关机命令&#xff1a;shutdown 这两个命令一般很少用到&#xff0c;我们了解即可。 2 查看日志信息命令 什么是日志&#xff0c;日志就是一个一个普通的文本文件&#xff0c;文件里面记录的是软件运行过程中的信息…

一、初始 Vue

1、Vue 1.1 Vue简介 1.1.1 Vue.js 是什么 Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;还便于与第…

Stable Diffusion 绘画入门教程(webui)-ControlNet

ControlNet可以说在SD里有着举足轻重的地位&#xff0c;如果没有ControlNet&#xff0c;sd的可玩性和实用性将大大降低。 前面几篇文章介绍了 提示词 和 lora&#xff0c;本篇文章介绍sd里最关键的第三个要素–ControlNet 文章目录 一、它具体能干啥1、艺术字2、改变姿态3、其…

Spring解决循环依赖

目录 什么是spring循环依赖 什么情况下循环依赖可以被处理&#xff1f; spring 如何解决循环依赖 创建A这个Bean的流程 答疑 疑问&#xff1a;在给B注入的时候为什么要注入一个代理对象&#xff1f; 初始化的时候是对A对象本身进行初始化&#xff0c;而容器中以及注入到B…

AI新工具(20240221) OOTDiffusion-虚拟试穿技术的实现;Groq-世界上最快的大模型,每秒可以输出近500个token

OOTDiffusion - 虚拟试穿技术的实现 OOTDiffusion是一种基于潜在扩散的虚拟试穿技术&#xff0c;其主要目的是通过实现控制性的换装融合&#xff0c;让用户能够在虚拟环境中试穿不同的服装。该技术通过融合最新的机器学习算法与图像处理技术&#xff0c;为用户提供了一种新颖的…

盘点 Udemy 上最受欢迎的免费编程课程

之前给大家推荐过一些油管上的免费学习资源&#xff0c;如果您还没有看过的话可以点击这里前往。 今天再给大家推荐一批Udemy上超高质量并且免费的编程课程&#xff0c;有需要的小伙伴可以学起来了。 1. JavaScript Essentials 第一门免费课程是&#xff1a;JavaScript Essen…

h5网页和 Android APP联调,webview嵌入网页,网页中window.open打开新页面,网页只在webview中打开,没有重开一个app窗口

我是h5网页开发&#xff0c;客户app通过webview嵌入我的页面 点击标题window.open跳转到长图页面&#xff0c;客户的需求是在app里新开一个窗口展示长图页面&#xff0c;window.open打开&#xff0c;ios端是符合客户需求的&#xff0c;但是在安卓端他会在当前webview打开 这…

IDEA实现ssh远程连接本地Linux服务器

文章目录 1. 检查Linux SSH服务2. 本地连接测试3. Linux 安装Cpolar4. 创建远程连接公网地址5. 公网远程连接测试6. 固定连接公网地址7. 固定地址连接测试 本文主要介绍如何在IDEA中设置远程连接服务器开发环境&#xff0c;并结合Cpolar内网穿透工具实现无公网远程连接&#xf…

Unity3d Shader篇(七)— 纹理采样

文章目录 前言一、什么是纹理采样&#xff1f;1. 纹理采样的工作原理2. 纹理采样的优缺点优点缺点 二、使用步骤1. Shader 属性定义2. SubShader 设置3. 渲染 Pass4. 定义结构体和顶点着色器函数5. 片元着色器函数 三、效果四、总结使用场景 前言 纹理采样是一种常用的图形学技…

打造智能物品租赁平台:Java与SpringBoot的实践

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

SparkSQL学习01

目录 1.SparkSQL特点1.1易整合1.2统一的数据访问1.3兼容Hive1.4标准的数据连接 2 SparkSQL编程模型DataFrameDataSet2.1 SQL2.2 DataFrame是什么2.3 DataSet是什么2.4 RDD&#xff0c;DataSet&#xff0c;DataFrame 3 SparkSQL核心编程3.1 编程入口3.2 SparkSQL基本编程3.2.1编…

掌握web控件定位技巧,提升页面操作效率!

简介 在做 Web 自动化时&#xff0c;最根本的就是操作页面上的元素&#xff0c;首先要能找到这些元素&#xff0c;然后才能操作这些元素。工具或代码无法像测试人员一样用肉眼来分辨页面上的元素。那么要如何定位到这些元素&#xff0c;本章会介绍各种定位元素的方法。 web 控…