vue中的进度条
Posted maxiag
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中的进度条相关的知识,希望对你有一定的参考价值。
①首先需要安装依赖
npm install --save nprogress
如果是vue cli3 需要在 依赖中 安装 nprogress 即可
②使用
一: 首先要在router文件的index.js中引入需要的包
import NProgress from ‘nprogress‘
import ‘nprogress/nprogress.css‘
import ‘nprogress/nprogress.css‘
二:使用 在导航守卫中使用
router.beforeEach((to, from, next) => { NProgress.start() next() }) router.afterEach(() => { NProgress.done() })
三: 改变颜色
在app.vue中设置即可
#nprogress .bar { background: red !important; //自定义颜色 }
以上是关于vue中的进度条的主要内容,如果未能解决你的问题,请参考以下文章
当片段视图加载是异步任务的一部分时,如何在片段加载之前显示进度条?
自定义对话框片段内的进度条 - 如何从 AsyncTask 传递进度?