vue中显示在页面顶部的进度条插件——NProgress

        我们在一些网站中经常见到导航栏上方的进度条显示,大家仔细观察,其实csnd中也有类似的效果,如下图显示效果,我们现在就来一起看看这个功能需求是怎么实现的。

 

 一、功能需求

        首先,实现这个功能其实不难,说实在点其实就是个动画效果,大家在学习原生js中的时候应该都接触过来控制动画的移动,无非就是让一个小的长方形盒子慢慢的边长,通过js来完全可以实现。但是我们这个是项目是vue,在vue中不需要我们自己去操作DOM,所以我们就使用一款轻量级的进度条插件,就是NProgress。

NProgress的官方网址:https://ricostacruz.com/nprogress/

二、使用方法

        在vue中,先引入所需要的插件:

npm i nprogress

下载安装完成后在vue中使用即可:

//导入进度条模块
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.start()//显示上方进度条
NProgress.inc() //进度条加一
NProgress.done()//结束进度条

改进度条颜色配置如下:

<style>
// 自定义进度条颜色#nprogress .bar {background: #F811B2 !important; //自定义颜色}
</style>

项目中常用就是如此,很简单吧!!!

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

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

相关文章

ElementUI el-table 鼠标滚动失灵的问题及解决办法

Bug&#xff1a;ElementUI el-table 鼠标滚轮下滑动失灵的情况 我测出来的这个问题条件很苛刻&#xff0c;需要达到以下几个条件才会触发&#xff1a; 1.element plus&#xff08;其他版本没试&#xff09; 2.el-table-column组件有fixed属性时 3.template标签中有el-butto…

2023最新版本Activiti7系列-监听器讲解

监听器 1.执行监听器 在流程实例执行过程中触发某个事件时&#xff0c;Activiti提供的执行监听器可以捕获该事件并执行相应的外部的Java代码&#xff0c;或者对指定的表达式求值。在流程实例执行过程中触发某个事件时&#xff0c;Activiti提供的执行监听器可以捕获该事件并执行…

uniapp学习

1 简单的表单校验 <!--uniapp:参考模板和字段生成页面 字段stuNumber 输入框 学号stuName 输入框 学生姓名teacher 输入框 辅导员submitDate 日期选择 填报日期morningTemperature 输入框&#xff08;数字校验一位小数&#xff09; 早上体温noonTemperature 输入框&…

8.4作业

用信号量的方式实现打印1234567后打印7654321循环交替打印。 #include<stdio.h> #include<string.h> #include<stdlib.h> #include<head.h> char buf[]"1234567"; sem_t sem; void *callBack1(void *arg) {int i0;int sstrlen(buf)-1;while…

el-cascader级联选择器加载远程数据、默认开始加载固定条、可以根据搜索加载远程数据。

加载用户列表分页请求、默认请求20条数据。想添加远程搜索用户功能。原有的方法filter-method不能监听到输入清空数据的时候。这样搜索完无法返回默认的20条数据。直接监听级联选择的v-model绑定的值是无法检测到用户自己输入的。 解决思路&#xff1a; el-cascader 没有提供…

list交并补差集合

list交并补差集合 工具类依赖 <dependency><groupId>org.apache.commons</groupId><artifactId>commons-lang3</artifactId><version>3.8.1</version> </dependency><dependency><groupId>commons-collections&…

二叉树的遍历(先序遍历,中序遍历,后序遍历)递归与非递归算法

目录 一、先序遍历题目链接1.递归2.非递归 二、中序遍历题目链接1.递归2.非递归 三、后序遍历题目链接1.递归2.非递归 一、先序遍历 先序遍历&#xff1a;先遍历一颗树的根节点&#xff0c;后遍历左子树&#xff0c;最后遍历右子树 先序遍历序列&#xff1a; 1 -> 2 -> 4…

PHP-mysql学习笔记

如题 记录发送emoji数据无法正常显示的问题PHPMysql 记录 发送emoji数据无法正常显示的问题 问题描述 前端发送关于emoji的表情数据给php,php写入mysql php接收到了数据,但无法写入写入过后返回前端无法正常显示 PHP 在对应的pdd函数中设置字符集为utf8mb4 Mysql emoji数…

Linux常用命令

1 查找命令 grep命令 命令是一种强大的文本搜索工具 格式&#xff1a; grep [option] pattern [file] 可使用 —help 查看更多参数。 使用实例&#xff1a; ps -ef | grep sshd 查找指定 ssh 服务进程 ps -ef | grep sshd | grep -v grep 查找指定服务进程&#xff0c;排除…

采用 SpringDoc、javadoc 无注解零入侵基于java注释

今天在gitee上学习到一个&#xff0c;个人觉得非常使用的功能。就是采用 SpringDoc、javadoc 无注解零入侵基于java注释&#xff0c;只需把注释写好 无需再写一大堆的文档注解了。 下面是源码的地址 RuoYi-Vue-Plus: 后台管理系统 重写RuoYi-Vue所有功能 集成 Sa-TokenMybati…

OpenSSL产生ECC密钥对,及私钥格式(PKCS1<--->PKCS8)转换

前言 1. OpenSSL产生ECC密钥对 openssl ecparm -name <curve_name> -genkey -out <private_key_file> 其中&#xff1a; <curve_name> 是椭圆曲线名称&#xff0c;例如primev1、secp384r1、secp256r1等。<private_key_file> 是要生成的私钥文件的路…

RabbitMQ 过期时间(TTL)

TTL,Time to Live的简称&#xff0c;即过期时间&#xff0c;RabbitMQ可以对消息和队列设置TTL。 RabbitMQ支持设置队列的过期时间和消息的过期时间。如果设置队列的过期时间则队列中所有的消息都有相同的过期时间。如果设置消息的过期时间则每条消息的过期时间则可以不同。如两…

LeetCode 27题:移除元素

题目 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出新长…

攻防世界-reverse-logmein

题目描述&#xff1a;菜鸡开始接触一些基本的算法逆向了 下载附件&#xff0c;是一个可执行程序 1. 思路分析 逆向出来看看代码 从代码中来看&#xff0c;密码长度需要和V8相等&#xff0c;并且每一个字符的运算结果需要满足 s[i] (char)(v8[i % v6 - 8] ^ v8[i]) 但是这…

codeforces Split Into Two Sets

Polycarp was recently given a set of n (number n — even) dominoes. Each domino contains two integers from 11 to n. Can he divide all the dominoes into two sets so that all the numbers on the dominoes of each set are different? Each domino must go into e…

libtorch::Tensor与Eigen::Tensor互相转换

1. Eigen::Tensor转libtorch::Tensor Eigen::Tensor<float, 3> a{2,4,3};a.setRandom();a(1,2,1) 11.0;/*核心*/torch::Tensor b torch::from_blob(a.data(), {1, a.dimension(2), a.dimension(1), a.dimension(0)});/*核心*/b b.permute({0, 3, 2, 1});std::cout <…

vue2、vue3生命周期详解以及对比

文章目录 对比vue2-vue3vue3生命周期生命周期的主要阶段详情 vue2 生命周期生命周期钩子函数 总共11个 常用的8个按照这四个阶段我们对应有八个生命周期钩子函数vue生命周期使用场景 对比vue2-vue3 如果熟悉vue2的话&#xff0c;vue3信手拈来&#xff0c;看图 vue3生命周期 on…

impala使用md5(3条命令搞定)

文章目录 前言1、 找到当前使用的hive版本的hive-exec.jar文件2、上传到HDFS上。改权限3、impala加载function总结 前言 impala没有md5函数。 1、 找到当前使用的hive版本的hive-exec.jar文件 我们用的CDH&#xff0c;所以hive-exec.jar在每台服务器上都准备好的。 我装了loca…

AnimatedVectorDrawable矢量图动画的使用和修改

文章目录 一、前言二、一个矢量图文件三、参考链接 一、前言 矢量可绘制对象可以提供比较复杂的动画效果&#xff0c;只是绘制比较复杂&#xff0c;这里可以让UI使用Adobe After Effects软件制作出相关的矢量图xml文件交由开发使用。只是如果需要重复播放的动画效果时候&#…

解决多线程环境下单例模式同时访问生成多个实例

如何满足单例&#xff1a;1.构造方法是private、static方法、if语句判断 ①、单线程 Single类 //Single类&#xff0c;定义一个GetInstance操作&#xff0c;允许客户访问它的唯一实例。GetInstance是一个静态方法&#xff0c;主要负责创建自己的唯一实例 public class LazySi…