vue使用Nprogress进度条功能实现

下图中的这种顶部进度条是非常常见的,在vue项目中有对应的插件:Nprogress

实现效果:

csdn也在使用:

或者这样自己使用

1、安装

NProgress可以通过npm安装。

bash 复制代码
npm install --save nprogress

注意此处的--save等同于-s,就是将插件的名称及版本号保存到package.json文件中的dependencies中,这样其他人克隆项目后,可以通过npm install就可以下载下来所有的插件到node_modules中了。

2、基本用法

Progress是一个轻量级的加载进度条库,它提供了一些配置项和方法来自定义和控制进度条的行为。

配置项(可通过NProgress.configure()方法进行配置):

  1. minimum:进度条最小值,默认为0。
  2. template:进度条的HTML模板,默认为'<div class="bar" role="bar"></div>'。
  3. easing:进度条的动画缓动函数,默认为'linear'。
  4. speed:进度条完成动画的速度(毫秒),默认为200。
  5. showSpinner:是否显示进度条的旋转图标,默认为true。
  6. trickle:是否启用增量加载效果,默认为false。
  7. trickleSpeed:增量加载的速度(毫秒),默认为200。

常用方法:

  1. NProgress.start():开始显示进度条,进度条从0开始。
  2. NProgress.set(value):设置进度条的当前值(范围为0到1)。
  3. NProgress.inc():增加进度条的当前值(默认增加0.1)。
  4. NProgress.done():完成进度条,进度条到达100%并消失。

使用示例:

  1. 配置全局参数:

    javascript 复制代码
    NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false, trickle: false });
  2. 显示进度条:

    javascript 复制代码
    NProgress.start();
  3. 设置进度条的当前值:

    javascript 复制代码
    NProgress.set(0.5);
  4. 增加进度条的当前值:

    javascript 复制代码
    NProgress.inc();
  5. 完成进度条:

    javascript 复制代码
    NProgress.done();

以上是NProgress的一些常用配置和方法,你可以根据自己的需求进行配置和调用。详细的配置项和方法可以参考官方文档或相关的API文档。

3、 高级用法(具体实现)

在vue中可以封装一个ts/js文件,用来配置Nprogress插件。

javascript 复制代码
import NProgress from "nprogress";
import "nprogress/nprogress.css";

NProgress.configure({
  // 动画方式
  easing: "ease",
  // 递增进度条的速度
  speed: 500,
  // 是否显示加载ico
  showSpinner: false,
  // 自动递增间隔
  trickleSpeed: 200,
  // 初始化时的最小百分比
  minimum: 0.3
});

export default NProgress;

此处进度条主要用于页面路由的跳转过程中,因此可以直接在router/index.js中使用:

在路由跳转之前,开启进度条加载,在路由跳转之后,结束进度条的加载。

javascript 复制代码
import NProgress from "@/utils/progress";//引入进度条插件


//全局前置路由守卫
router.beforeEach((to, from, next) => {
    //页面跳转之前,开启进度条
    NProgress.start();
});


// 全局后置路由守卫
router.afterEach((to, from) => {
    //页面跳转之后,关闭启进度条
    NProgress.done();
    window.scrollTo(0, 0);

})

4、扩展:

如果我们想改变进度条的颜色,可以进入App.vue里,在style中加上下面这样几行代码即可。

css 复制代码
#nprogress .bar {
  background: blue !important;    //这里可以随便写颜色
}
相关推荐
264玫瑰资源库9 分钟前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端20 分钟前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED26 分钟前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪1 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程1 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常1 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴1 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中1 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木1 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师2 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt