技术标签： 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;
}
文章浏览阅读519次。微信查券机器人搭建1、淘客机器人是什么？有什么价值？简单的说，淘客机器人是一个可以帮你赚钱的工具，它通过帮助用户查询商品的优惠券来获得官方联盟（一般指阿里妈妈、京东联盟、多多进宝等）的佣金。如果你想让更多的用户来使用你的机器人，可以返利一部分佣金给购买者，这样用的人越多，你就可以躺着赚钱了。参考2、公众号淘客机器人系统免费版：公众号淘客机器人自助搭建教程http://www.wlkankan.cn/cate50/221.html3、微信订阅号可以接入吗？可以，系统支持订阅号的的淘客机器人系统，_淘客机器人管理后台
文章浏览阅读2.3k次。XDL(X-DeepLearning)是阿里巴巴开源的一款深度学习框架。官方介绍，此框架针对广告、推荐、搜索的场景做了很多优化。广告、推荐和搜索的模型，一个重要的特点是存在大量的稀疏特征，为此xdl提供了稀疏API:APIxdl.embedding计算单路稀疏特征的embeddingxdl.merged_embedding同时计算多路稀疏特征的embedding，..._深入浅出embedding pdf
文章浏览阅读719次。《空中交通管制自动化系统最低安全高度告警及短期飞行冲突告警功能》（MH/T4022-2006） SNET将和MSDP部署在同一台服务器上。 SNET子系统读取共享内存中更新的多监视源融合数据（包括MS..._空管 ntz告警实现
文章浏览阅读120次。cJson这个库开源 跨平台，用来解析和生成json数据很方便。项目地址：https://github.com/DaveGamble/cJSON只需要把cJson.c,cJson.h拷进项目就ok. 下面直接上代码：#include#include#include"cJSON.h"int main(){/*************json的解析***************************..._c语言截取 jsondata
文章浏览阅读80次。专注于Java领域优质技术号，欢迎关注作者：肥朝内容大纲.png目的面试很多时候都会问一些通用的东西，比如多线程,比如数据加密,比如HTTPS,换句话说,无论你从事前端还是后端,数据加密和HTTPS都是必须掌握的数据加密首先,我们为什么要数据加密?因为HTTP所有访问都是明文的,只要能监听到网络所有的请求数据都是透明的,比如任何浏览器的开发者工具就能很清楚的看到表单提交的参数和地址,在Androi...
文章浏览阅读802次。Android屏幕适配出现的原因在我们学习如何进行屏幕适配之前，我们需要先了解下为什么Android需要进行屏幕适配。 由于近些年来，手机移动端的发展迅速，手机的品牌也在增多，这导致了设备碎片化、品牌碎片化、系统碎片化、传感器碎片化和屏幕碎片化的程度也在不断地加深。这也就是我们今天讨论的 屏幕的碎片化（屏幕适配）。详细的Android屏幕碎片化的数据我在这里就不列出来了，直_adnroid屏幕适配学习
文章浏览阅读2.9k次。flowable入门、flowable现状、flowable开源产品、flwoable入门系列、flowable课程、flowable与activiti区别Flowable是用Java编写的轻量级业务流程引擎。Flowable流程引擎允许您部署BPMN 2.0流程定义（用于定义流程的行业XML标准），创建流程定义的流程实例，运行查询，访问活动或历史流程实例以及相关数据等等。本节将逐步介绍各种概念和API，通过您可以在自己的开发机器上进行的实例进行实现。_flowable怎么关联自己的组
文章浏览阅读408次。1、LocalDate（1）构造通过字符串构造LocalDate stringParse = LocalDate.parse("2021-09-29");通过年月日构造LocalDate ofLocalDate = LocalDate.of(2021, 9, 29); // 年月日LocalDate ofLocalDate1 = LocalDate.ofYearDay(2021, 255); // 年 天数静态方法构造LocalDate nowLocalDate = Loca_java8 季度
文章浏览阅读531次。Python实训周总结Python的学习到现在已经有半个月了，通过讲解与企业化标准的培训，使我加深了对python的认识。因为之前有学Java的基础，所以这次实训入门时也相对容易许多。这是我第一次接触到Python语言，但不是我学习的第一种编程语言。它的逻辑规则和C语言和JAVA存在很大的相似之处，在对数据进行处理时有种似曾相识之感。实习安排是逐渐加深的，所以跟随课程学习相对容易。Python是一..._python实训成果
文章浏览阅读139次。一.OpenFileDialogOpenFileDialog dlg= new OpenFileDialog();1.对话框标题dlg.Title = "Open File";2.指定目录默认情况下，对话框将打开用户在上一次运行应用程序时打开的目录。设置InitialDirectory属性可以改变这种设置。注意：不要在应用程序中使用硬编码的目录字符串，因为该目录可能在用户的系统上不存在。..._dlg.addextension = true;
文章浏览阅读976次。1、msdn下载的系统怎么安装，首先在官网将win10系统iso镜像的下载链接通过下载工具，下载到非系统盘的分区当中。1、msdn下载的系统怎么安装，首先在官网将win10系统iso镜像的下载链接通过下载工具，下载到非系统盘的分区当中。有小伙伴们不知道安装msdn系统的具体操作，那么小编就教大家下载的系统怎么安装吧。有小伙伴们不知道安装msdn系统的具体操作，那么小编就教大家下载的系统怎么安装吧。小鱼一键重装系统v3.1.329.319。4、选择需要安装的系统，双击还原。4、选择需要安装的系统，双击还原。_小鱼一键重装下载的系统在哪个盘
文章浏览阅读891次，点赞3次，收藏3次。ChatGPT是一种基于人工智能的自然语言处理模型，由OpenAI开发。它的名字中的"GPT"代表"Generative Pre-trained Transformer"，表明它是一个基于Transformer架构的预训练生成模型。ChatGPT的核心思想是通过大规模的文本数据预训练，使得模型能够理解和生成自然语言文本，从而可以用于问答、对话生成等任务。