vue中使用 NProgress 详细配置跟用法

一、下载地址

官方地址:http://ricostacruz.com/nprogress/

二、使用方式

依赖于 jQuery (1.8版本及以上),添加 nprogress.js 和 nprogress.css 到你的项目中。

三、基本使用方法

  1. NProgress.start() — 显示进度条
  2. NProgress.set(0.4) —设置百分比
  3. NProgress.inc() — 增加一点点
  4. NProgress.done() — 完成进度条

四、基本配置
通过 minimum 来修改最小百分比
NProgress.configure({ minimum: 0.1 });
通过 ease(一个 CSS 中的 easing 值) 调整动画设置和速度 speed (毫秒ms)
NProgress.configure({ ease: 'ease', speed: 500 });
关闭进度条步进,设置 trickle 为 false。
NProgress.configure({ trickle: false });
调整 trickleRate (每次步进增长多少) 和 trickleSpeed (步进间隔,单位毫秒ms)
NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });
禁用进度环,设置 showSpinner 为 false
NProgress.configure({ showSpinner: false });

五、实例演示

// 进度条
import NProgress from "nprogress";
import "nprogress/nprogress.css";

  // 进度条
  NProgress.configure({ showSpinner: false });
  NProgress.start();
 NProgress.done();

具体可以参考实际项目使用

发布了36 篇原创文章 · 获赞 2 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/u010494101/article/details/105366661