Vue使用NProgress进度条的方法_白江_前端开发者

本文实例为大家分享了vue使用NProgress进度条的具体代码,供大家参考,具体内容如下

1、安装

npm i -S nprogress

2、在router.js中使用

import vue from 'vue'
import Router from 'vue-router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'


vue.use(Router)

const router = new Router({
 mode: 'history',
 routes: [
 ]
})

router.beforeEach((to, from, next) => {
 NProgress.start()
 /// code
})
router.afterEach(() => {
 NProgress.done()
})

3、nprogress的z-index

假如你的header比nprogress的高,可能看不见进度条,可以采用这个办法实施,其中数字比header高就行,或者,你改header的z-index

#nprogress {
 .bar {
  z-index: 15031;
 }
 .spinner {
  z-index: 15031;
 }
}

4、nprogress修改颜色

#nprogress .bar {
  background: red !important; //颜色可修改
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持前端开发者。

» 本文来自:前端开发者 » 《Vue使用NProgress进度条的方法_白江_前端开发者》
» 本文链接地址:https://www.rokub.com/70412.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!