NProgress 的使用 NProgress 是前端轻量级 web 进度条插件
安装 NPM
npm install nprogress --save
或
yarn add nprogress
CDN
基本使用
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() // 关闭进度条 }) 1 2 3 4 5 6 7 8 9 10 效果
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' })
