电商商家开发小程序_Vue使用NProgress进度条的方法

Vue使用NProgress进度条的方法       这篇文章主要为大家详细介绍了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'

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; //颜色可修改
}

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


相关阅读