vue进度条插件nprogress

vue进度条插件

在Vue 2.0中使用Nprogress是通过安装Nprogress库来实现的。下面是一些基本步骤：

使用npm或者yarn来安装Nprogress库：

npm install --save nprogress

或者

yarn add nprogress

在Vue组件中导入Nprogress：

import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'

在Vue组件中使用Nprogress来展示进度条。这可以在Vue的生命周期钩子函数中进行，比如mounted：

mounted() {
    
    
  Nprogress.start();  // 开始进度条
  
  // 在异步操作结束后，停止进度条
  Nprogress.done();
}

除了mounted钩子函数，你还可以在其他适当的地方调用Nprogress.start和Nprogress.done来控制进度条的显示和隐藏。

注意：上述代码只是一个简单的用法示例，实际场景可能会有所不同。请根据你的具体需求进行适当的调整和扩展。

使用方法

NProgress.start() — 显示进度条

NProgress.set(0.4) —设置百分比

NProgress.inc() — 增加一点点

NProgress.done() — 完成进度条

NProgress还提供了其他几个方法，如设置百分比，调用.set(n)来控制进度，其中n的取值范围为0-1。调用.inc()产生一个随机增量这将永远不会达到100％：将其用于每个图像加载（或类似加载）。通过传递 true 参数给done()，使进度条满格，强制完成。

NProgress.set(0.0);     // NProgress.start()
NProgress.set(0.4);     // 要设置进度百分比
NProgress.set(1.0);     // NProgress.done()

NProgress.inc();        // 递增-递增进度条 如果要增加特定值，可以将其作为参数传递
NProgress.inc(0.2);     // 这将获取当前状态值并添加0.2直到状态为0.994   
// 传递true到done()，即使未显示进度条也将显示进度条。（默认 如果.start()不调用，.done()*不会做任何事情） 
NProgress.done(true);   // 强制完成
// 获取状态值 要获取状态值，请使用.status
NProgress.status

实际使用中，我们一般在Ajax或者Pjax加载时，调用NProgress。你可以在jQuery提供的Ajax，或者使用Pjax，或者在其他框架如Vue.js中都可以很好的使用NProgress。

这里我们示例演示使用Ajax方法请求远程数据，然后调用进度条加载的过程。

$('#loading').on('click', function(event) {
    
    
    event.preventDefault();
    NProgress.start();
    $.get('data.php', function(data) {
    
    
        $('#msg').html(data);
        NProgress.done();
    });
});

配置插件

minimum-最小值

通过 minimum 来修改最小百分比。设置开始时最低百分比，默认是0.08。

NProgress.configure({
    
     minimum: 0.1 });

template-模板

你可以通过 template 修改标记结构。为了保证进度条正常工作，需要一个包含 role='bar' 属性的元素。

NProgress.configure({
    
    
	template: "..."
});
NProgress.configure({
    
    
  template: "<div class='....'>...</div>"
});

ease和speed-CSS动画属性

ease可传递CSS3缓冲动画字符串（如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier）。

speed为动画速度（默认200，单位ms）。

使用缓动（CSS缓动字符串）和速度（以毫秒为单位）调整动画设置。（默认：ease和200）

通过 ease(一个 CSS 中的 easing 值) 调整动画设置和速度 speed （毫秒ms）。

NProgress.configure({
    
     ease: 'ease', speed: 500 });

trickle-自动递增

通过将此设置为来关闭自动递增行为false , 是否显示进度条，默认：true

想关闭进度条步进？设置 trickle 为 false。

NProgress.configure({
    
     trickle: false });

进度条增加幅度和频率 trickleSpeed trickleRate

设置每次进度条步进速度（ms）。单位分别是百分比、毫秒

你可以调整 trickleRate (每次步进增长多少) 和 trickleSpeed (步进间隔，单位毫秒ms).

NProgress.configure({
    
     trickleRate: 0.02, trickleSpeed: 800 });

showSpinner

是否显示环形进度动画，默认true。

想禁用进度环？设置 showSpinner 为 false。

NProgress.configure({
    
     showSpinner: false });

parent -父级容器

指定改变的父容器，默认body。

NProgress.configure({
    
     parent: '#container' });

定制化

当然，你也可以修改nprogress.css以达到你想要的进度条外观，比如改变进度条背景颜色、高度等等。

NProgress.configure是Nprogress库中的一个方法，用于配置全局的Nprogress选项。通过这个方法，你可以设置Nprogress的行为和样式。

以下是一个示例，展示如何使用NProgress.configure来配置Nprogress实例：

import Nprogress from 'nprogress';

Nprogress.configure({
    
    
  minimum: 0.1,        // 进度条的最小值
  easing: 'ease',      // 进度条的动画效果
  speed: 500,          // 动画过渡的速度（毫秒）
  trickle: true,       // 是否自动逐渐增加进度条
  trickleSpeed: 200,   // 增加进度条时的速度（毫秒）
  showSpinner: false,  // 是否显示加载图标
  parent: 'body',      // 进度条的父元素
  barSelector: '.my-progress-bar',  // 自定义进度条选择器
  spinnerSelector: '.my-spinner',    // 自定义加载图标选择器
  template: '<div class="my-progress-bar"></div>'  // 自定义进度条模板
});

通过NProgress.configure方法，你可以根据需要自定义Nprogress的样式和行为。以上示例只展示了一些常用的配置选项，你可以根据文档进一步了解其他可用的配置选项。