NProgress进度条简单使用

安装

// npm
npm install --save nprogress

//Yarn
yarn add nprogress

直接引入js、css或者通过cdn引入

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

使用方法

方法调用start和done

// 使用方法
NProgress.start(); // — 显示进度条
NProgress.done(); // — 结束进度条

通过调用 .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(); // — 增加一点点

通过使用done()让进度条关闭

NProgress.done(true); — 完成进度条

进度条配置

NProgress.configure配置

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

6.改变进度条颜色
在使用start()函数前,改变样式的颜色:

#nprogress .bar {
  background: #29d !important;
}

示例

// router/index.js
import { createWebHistory, createRouter } from 'vue-router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

NProgress.configure({ showSpinner: false })

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

router.afterEach(() => {
  NProgress.done()
})
posted @ 2023-02-21 23:29  槑孒  阅读(356)  评论(0编辑  收藏  举报