vue2使用进度条插件

效果：

一、安装

npm install nprogress --save

二、使用

NProgress 一般搭配路由守卫使用

import NProgress from 'nprogress'   // 导入 nprogress
import '@/components/NProgress/nprogress.less'   // 导入样式，否则看不到效果

NProgress.configure({ showSpinner: false })   // 显示右上角螺旋加载提示

router.beforeEach((to, from, next) => { 
    NProgress.start()   // 开启进度条
    // some code ...
    NProgress.done()   // 关闭进度条
})

三、配置项

1、开启进度条：

NProgress.start()

2、关闭进度条

NProgress.done()

3、设置进度条的进度

设置进度条的百分比，其中 n 是 0 ~ 1 之间的数字

NProgress.set(n)

以随机量递增进度条，但永远不会达到 100%

NProgress.inc()

NProgress.configure({
    // 进度条开始时的百分比（默认0.08）
    minimum: 0.08,
    // 是否显示右上角螺旋加载提示
    showSpinner: true,
    // 设置父容器（默认body）
    parent: '#box1'
})

vue2使用进度条插件

悦读