NProgress 的使用
NProgress 是前端轻量级 web 进度条插件
安装
NPM
npm install nprogress --save
或
yarn add nprogress
CDN
https://unpkg.com/nprogress@0.2.0/nprogress.js
https://unpkg.com/nprogress@0.2.0/nprogress.css
基本使用
NProgress 一般搭配路由守卫使用
import NProgress from 'nprogress' // 导入 nprogress
import '@/components/NProgress/nprogress.less' // 导入样式,否则看不到效果
NProgress.configure({ showSpinner: true }) // 显示右上角螺旋加载提示
router.beforeEach((to, from, next) => {
NProgress.start() // 开启进度条
// some code ...
NProgress.done() // 关闭进度条
})
效果
API 说明
NProgress.start()
作用:开启进度条
NProgress.done()
作用:关闭进度条
NProgress.set(n)
作用:设置进度条的百分比,其中 n 是 0 ~ 1 之间的数字。
NProgress.inc()
作用:以随机量递增进度条,但永远不会达到 100%。
常见配置
minimum
作用:进度条开始时的百分比(默认0.08)
showSpinner
作用:是否显示右上角螺旋加载提示
parent
作用:设置父容器(默认body)
NProgress.configure({
minimum: 0.08,
showSpinner: true,
parent: '#box1'
})