vue3 vite 使用NProgress.js纳米级进度条
NProgress.js 官网:https://ricostacruz.com/nprogress/
安装方式:
npm install nprogress
使用方法
在router 的index.js文件下引入
// 引入NProgress进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
router.beforeEach((to,from,next)=>{
// 进度条
NProgress.start()
next()
})
router.afterEach(()=>{
NProgress.done()
})
修改进度条样式
// 修改进度条颜色 全局css文件中添加,也可以独立出一个css文件,在页面处单独引入
#nprogress .bar {
background: red !important;
}
NProgress.js的一些方法:
显示进度条(shows the progress bar):
NProgress.start()
设置进度条加载的百分比(sets a percentage)
NProgress.set(0.4)
进度条增加一点点(increments by a little)
NProgress.inc()
进度条加载完成(completes the progress)
NProgress.done()
圆圈加载:showSpinner
加载条右下方的小圈圈,通过将加载微调器设置为 false 来关闭它。(默认值:true)
NProgress.configure({ showSpinner: false });