veu 中 nprogress 的使用方法

今天偶然发现一个进度条的轻量组件，之前再某个项目中见过，但不知道是上面组件，也没有深究，今天偶然看到，便试一下这个组件的用法并记录下来。

1、安装

 npm install --save nprogress

2、引入

 import Nprogress from 'nprogress' // jsimport 'nprogress/nprogress.css' // 样式

3、使用
我的后台管理系统处于起步阶段，刚写到路由处，所以暂且与router 一起使用，后续会把与axios一起使用的方法奉上。

 router.beforeEach((to, from, next) => {NProgress.start(); // 显示进度条});router.afterEach(() => {NProgress.done(); // 关闭进度条});

4、配置
minimum：设置最低百分比。

 NProgress.inc(0.2);

百分比：通过设置progress的百分比，调用 .set(n)来控制进度，其中n的取值范围为0-1。

  NProgress.set(0.4);

showSpinner：进度环显示隐藏
ease：调整动画设置，ease可传递CSS3缓冲动画字符串（如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier）。speed为动画速度（单位ms）。

 NProgress.configure({easing: "ease",speed: 500,showSpinner: false});

最后，我项目的进度环不知道为什么隐藏不了，无奈，我只能改变样式去掉了。

 #nprogress .spinner {display: none !important;}

veu 中 nprogress 的使用方法相关推荐

stream map方法_Java Stream中map和flatMap方法
最近看到一篇讲stream语法的文章,学习Java中map()和flatMap()方法之间的区别. 虽然看起来这两种方法都做同样的事情,都是做的映射操作,但实际上差之毫厘谬以千里. 通过演示Demo中 ...
java中json重复数据结构_JS实现去除数组中重复json的方法示例
本文实例讲述了JS实现去除数组中重复json的方法.分享给大家供大家参考,具体如下: var array = [{"name":"123"},{"na ...
继承实现的原理、子类中调用父类的方法、封装
一.继承实现的原来 1.继承顺序 Python的类可以继承多个类.继承多个类的时候,其属性的寻找的方法有两种,分别是深度优先和广度优先. 如下的结构,新式类和经典类的属性查找顺序都一致.顺序为D--- ...
浅谈在ASP.NET中数据有效性校验的方法
作者:未知作为一名程序员,一定要对自己编写的程序的健壮性负责,因此数据的校验无论在商业逻辑还是系统实现都是必不可少的部分. 我这里总结了一种自认为比较不错的asp.net(C#)的数据校验方法,如大 ...
JavaScript文件中调用AngularJS内部方法或改变$scope变量
需要在其他JavaScript文件中调用AngularJS内部方法或改变$scope变量,同时还要保持双向数据绑定: 首先获取AngularJS application: 方法一:通过controll ...
D3D中简单的截图方法 (转)
[ZT]D3D中简单的截图方法试了下,果然可以. 在渲染完所有东东后(Present之前) 获得BackBuffer表面然后用D3DX的函数保存 void ScreenShot (char *fi ...
hibernate4中取得connection的方法
在hibernate3中,使用了c3p0连接池,尝试了多种办法取得connection对象,以下两种可以使用. Java代码 Connection conn; // 方法1:hibernate4中将 ...
c#中接口的使用方法图解_C#图解教程第十五章接口
接口什么是接口接口是指定一组函数成员而不实现它们的引用类型.所以只能类和结构来实现接口. 这种描述比较抽象,直接来看个示例. 下例中,Main方法创建并初始化了一个CA类的对象,并将该对象传递给P ...
mysql隐藏密码_MySQL在Linux系统中隐藏命令行中的密码的方法
在命令行中输入命令并不是一个好主意,会造成安全问题.但是如果你决定去写一个应用,而这个应用需要在命令行中使用密码或者其他敏感信息.那么,你能通过以下方法禁止系统的其他用户轻易的看到这些敏感数据呢?, ...
java如何重写_java中如何重写一个方法
方法的重写: 1.在子类中可以根据需要对从基类中继承来的方法进行重写. 2.重写的方法和被重写的方法必须具有相同方法名称.参数列表和返回类型. 3.重写方法不能使用比被重写的方法更严格的访问权限. 在 ...

veu 中 nprogress 的使用方法

veu 中 nprogress 的使用方法相关推荐

最新文章

热门文章

veu 中 nprogress 的 使用方法

veu 中 nprogress 的 使用方法相关推荐

最新文章

热门文章

veu 中 nprogress 的使用方法

veu 中 nprogress 的使用方法相关推荐