技术标签： vue 前端 vue.js javascript
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6zVfsbUC-1677038881618)(null)]
github地址 https://github.com/rstacruz/nprogress
官网 https://ricostacruz.com/nprogress/
//npm
npm install nprogress -s
//CDN
<link rel="stylesheet" href="https://unpkg.com/[email protected]/nprogress.css">
<script src='https://unpkg.com/[email protected]/nprogress.js'></script>
vue项目router.js中添加(这里以vue-router为例) 如果在axios中使用则需要再引入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
//在路由导航守卫中添加
router.beforeEach((to, from, next) => {
// 每次切换页面时，调用进度条
NProgress.start()
next()
})
router.afterEach(() => {
// 在即将进入新的页面组件前，关闭掉进度条
NProgress.done()
})
直接调用 .start()和.done()来控制进度条。
NProgress.start(); //开启进度条
NProgress.done(); //关闭进度条 进度会直接到100%
通过调用 .set(n)来设置进度，n是0-1的数字。
NProgress.set(0.0); //相当于.start()
NProgress.set(0.5);
NProgress.set(1.0); //相当于.done()
使用.inc()随机增长进度条，注意，这个方法永远不会让进度条达到100%。
NProgress.inc();
通过.configure()进行配置
NProgress.configure({
easing: 'ease', // 动画方式
speed: 500, // 递增进度条的速度
showSpinner: false, // 是否显示右上角的转圈动画
trickleSpeed: 200, // 自动递增间隔
minimum: 0.3 // 启动时使用的最小百分比（默认：0.08）
})
#修改加载条颜色,在App.vue中的style中增加：
#nprogress .bar {
background: red !important;
}
文章浏览阅读108次。2019独角兽企业重金招聘Python工程师标准>>> ..._kohana是什么洗发水
文章浏览阅读8.9k次，点赞4次，收藏43次。Qt中的QUdpSocket发生严重丢包现象，在Linux下使用while死循环接收来解决，但存在CPU占用率太高的问题。_qt udp 丢包考核
文章浏览阅读2w次，点赞14次，收藏11次。UnboundLocalError： local variable 'xxx' referenced before assignment在函数外部已经定义了变量n，在函数内部对该变量进行运算，运行时会遇到了这样的错误：主要是因为没有让解释器清楚变量是全局变量还是局部变量。有时候在其他模块声明该变量，在本模块使用时也会出现。那么问题就来了，出现这个问题我们就要考虑程序是按照全局变量，就是经过函数运算到函数外面还生效，还是按照局部变量在函数外生效。第一种，当全局变量来看，就是使用global..._unboundlocalerror: local variable 'sentencepiece_model_pb2' referenced befor
文章浏览阅读5.4k次。chatgpt VS 文心一言使用对比实测_chatgpt和文心一言
文章浏览阅读838次。thermal gover 有五种，我们这里以gov_bang_bang.c 为例gov_bang_bang是控制风扇的。之后两种状态，即风扇开和关，并没有提供调整风扇转速的方法.static struct thermal_governor thermal_gov_bang_bang = { .name = "bang_bang", .throttle = bang_bang_contr_thermal bangbang
文章浏览阅读5.9k次。sourceinsight一、AnjutaAnjuta是一个多语言的IDE，它最大的特色是灵活，同时打开多个文件，内嵌代码级的调试器(调用gdb)，应用程序向导（Application wizards）可..._linux c++ ide
文章浏览阅读1k次。不同点：node.children不会取到节点下面的TextNode但是node.childNodes会取到 共同点：两者都是集合类数组，可以通过索引的方式取到值也可以用for循环遍历..._node.children和node.childnodes的区别
文章浏览阅读7.2k次，点赞25次，收藏116次。一，html+css基础1-1Html和CSS的关系学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边_sm学习 html
文章浏览阅读9.5k次，点赞7次，收藏32次。vue中 $bus 一般与 $emit、 $on、 $off 连用，一般用在任意组件间的通信，即 $bus 用来传递非父子关系的数据。如两个组件之间传递数据：子组件1子组件21、$emit2、$on注意：$emit 和 $on 的事件必须在一个公共的实例上，才能够触发。3、实例事件实例事件就是在构造器外部调用构造器内部的数据。4、实例在Student组件中提供数据给另一个School组件在School组件中使用事件总线，接收数据。School组件想接收数据，则在School组件中给 $bus绑_this.$bus.$on
文章浏览阅读931次，点赞3次，收藏4次。文章目录MISC玩坏的winxpICSeasyiec喜欢移动的黑客carefulguyxyp07re定时启动ez_algorithmRe_functionfreestylewebSign_inuploadez_java这次re做了4个，ICS做了3个，wp直接贴战队的了。MISC玩坏的winxp1、虚拟机加载硬盘2、Magnet AXIOM收集信息发现了网页浏览历史中的特殊网址。3、meiren.png中两次binwalk可以得到一个需要密码才能解压的zip，并且提示寻找戴围脖的软件。4、尝试_2022年网刃杯wp
文章浏览阅读1.5k次。《UnityAPI.CharacterController角色控制器》 版本 作者 参与者 完成日期 备注 UnityAPI_CharacterController_V01_1.0 严立钻 2020.08.28 ..._unity charactercontroller源码
文章浏览阅读151次。transform:改变，变形，转换transform:rotate(10deg); 旋转10度transform:skew(20deg); 倾斜20度transform:scale(1.5); 放大1.5倍，缩小改为负transform:translate(100px,50px); 向右移100px，向上移动50px，如需左 下移动改为负值即可border-..._border-radius transform