Vue使用NProgress

香草物语博客 2021-05-20

678

NProgress

NProgress
就是在页面顶端显示一个进度条。

安装

npm install --save nprogress

使用

引入NProgress

我们新建一个global.js
文件，通过钩子，在路由开始前，启动NProgress
，路由结束后，停止NProgress

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import router from './router'


router.beforeEach((to, from, next) => {
    NProgress.start()
    setTimeout(() => {
      next()
    }, 1000)
  }
)


router.afterEach((to, from) => {
  NProgress.done()
})

在main.js中引入global.js

import  './global'

NProgress方法说明

//方法
NProgress.start() - 显示进度条
NProgress.set(0.4) - 设置百分比
NProgress.inc() - 稍微增加
NProgress.done() - 完成进度(进度条消失)

修改NProgress颜色

颜色配置是在App.vue
中的加入样式

#nprogress .bar {
  background: red !important;
}

NProgress配置

可以通过调用 .set(n)来设置进度，n是0-1的数字。
NProgress.set(0.0);     // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0);     // Sorta same as .done()


可以使用inc()随机增长进度条，注意，这个方法永远不会让进度条达到100%。
NProgress.inc();


NProgress.configure({ showSpinner: false }) //禁用进度环
NProgress.configure({ trickle : false })    //关闭进度条步进
NProgress.configure({ trickleRate : 10})    //每次步进增长多少
NProgress.configure({ trickleSpeed : 200})  //每次步进间隔，单位毫秒ms
NProgress.configure({ easing: 'linear'})    //动画方向
NProgress.configure({ speed : 10})          //动画速度，单位毫秒ms
NProgress.configure({ minimum : 0.08})      //最小百分比

spinner
即右侧的一个东西

数据库

文章转载自香草物语博客，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。