技术标签： 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;
}
文章浏览阅读3k次。启动Softing OPC Client输入连接信息后可以看到已经连接到OPC服务器。打开文件目录下的.config，修改IP和端口号即可。Softing OPC Client显示已经连接。_opcua模拟器
文章浏览阅读186次，点赞3次，收藏3次。宏景HCM系统是一款由宏景软件研发的系统，主要功能包括人员、组织机构、档案、合同、薪资、保险、绩效、考勤、招聘、培训、干部任免和人事流程等业务的管理，以及人事、绩效、培训、招聘、考勤等业务自助，还具备了报表功能和灵活的表格工具，支持集团管控、目标管理、领导决策等应用。宏景HCM系统templates接口存在文件读取漏洞。攻击者可以通过发送特定的POST请求，利用该漏洞获取系统敏感文件。
文章浏览阅读987次，点赞15次，收藏14次。语法：DROP TABLE 表名。
文章浏览阅读5.4w次，点赞148次，收藏888次。1.文件包含漏洞概述和SQL注入等攻击方式一样，文件包含漏洞也是一种注入型漏洞，其本质就是输入一段用户能够控制的脚本或者代码，并让服务端执行。什么叫包含呢？以PHP为例，我们常常把可重复使用的函数写入到单个文件中，在使用该函数时，直接调用此文件，而无需再次编写函数，这一过程叫做包含。有时候由于网站功能需求，会让前端用户选择要包含的文件，而开发人员又没有对要包含的文件进行安全考虑，就导致攻击者可以通过修改文件的位置来让后台执行任意文件，从而导致文件包含漏洞。以PHP为例,常用的文件包含函数有以下四种。..._文件包含漏洞
文章浏览阅读1.1k次。题目：Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all the values along the path equals the given sum.For example:Given the below binary tree
文章浏览阅读189次。专业知识是最为重要的一点，拥有了坚实的专业基础，你才能迈向成功的彼岸。因此，面试之前，一定一定要复习好专业知识。对自己学过的知识，要做一个概括，放在脑海中。茶余饭后，复习一下，做到随便看到一道基础题目，心中都能有个答案。比如，一道最基本基础题，ArrayList和LinkedList有什么区别？如果你是做Java后台开发的，应该都会了吧。你在简历上的信息，就是面试官了解你的窗口。你写上去的项目，自己一定一定要了解清楚来龙去脉。如果把别人很厉害的项目copy上去，面试官一问你三不知，那就露馅啦~同时，简历上需_计算机类面试编程练习建议
文章浏览阅读1.1w次，点赞4次，收藏25次。原文：https://community.emc.com/docs/DOC-33815SCSI 即 小型计算机系统接口 。小型计算机系统接口（英语：Small Computer System Interface; 简写：SCSI），一种用于计算机和智能设备之间（硬盘、软驱、光驱、打印机、扫描仪等）系统级接口的独立处理器标准。SCSI是一种智能的通用接口标准。它是各种计算机与外部_iscsi目前发展状况
文章浏览阅读701次。C# 不能引用命名空间_hybridclr 引用不了c#的命名空间
文章浏览阅读346次，点赞8次，收藏6次。根据大佬操作未能实现，在最后一步，还需要什么操作吗？
文章浏览阅读6.8k次。最近要做一个为视频设置封面的功能，这里展示一下简单的demo。demo效果这里直接将选取的视频某一时间的bitmap显示在视频下方。上面是视频，下面是所获取那一帧的截图。具体代码这里的话主要是靠videoView来显示视频内容，seekBar来控制视频的进度,使用MediaMetadataRetriever来获取所选中进度的时间的视频画面。布局代码<LinearLayoutx..._android 仿剪映app 视频封面设置功能demo
文章浏览阅读7.1k次。 多个参数用空格隔开就行。 如：-Dspring.property.path=/Users/germmy/gitall/nono-properties/nono-all/nono-app/nono-web/stb -Dlog.dir=/Users/germmy/gitall/nono-all/nono-app/nono-web 对于这种参数，可以在..._idea vm options 多个参数
文章浏览阅读1k次。函数substrcall_user_func把第一个参数作为回调函数调用版本说明5.3.0对面向对象里面的关键字的解析有所增强。在此之前，使用两个冒号来连接一个类和里面的一个方法，把它作为参数来作为回调函数的话，将会发出一个**E_STRICT**的警告，因为这个传入的参数被视为静态方法。用call_user_func()来调用一个类里面的方法<?phpclass myclass { static function say_hello() { _call_user_func ctf