码迷,mamicode.com
首页 > 其他好文 > 详细

vue中的进度条

时间:2020-07-03 15:47:43      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:自定义颜色   important   文件   pre   save   star   progress   install   port   

①首先需要安装依赖 
npm install --save nprogress
如果是vue cli3 需要在 依赖中 安装 nprogress 即可
②使用
 一: 首先要在router文件的index.js中引入需要的包
import NProgress from ‘nprogress‘
import ‘nprogress/nprogress.css‘
二:使用 在导航守卫中使用
router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done()
})
三: 改变颜色
在app.vue中设置即可
 #nprogress .bar {
      background: red !important; //自定义颜色
    }
 
 
 

vue中的进度条

标签:自定义颜色   important   文件   pre   save   star   progress   install   port   

原文地址:https://www.cnblogs.com/maxiag/p/13230389.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!