Vue使用NProgress进度条的方法


Posted in Javascript onSeptember 21, 2019

本文实例为大家分享了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; //颜色可修改
}

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

Javascript 相关文章推荐
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
Express.JS使用详解
Jul 17 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
javascript实现textarea中tab键的缩排处理方法
Jun 26 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 #Javascript
vue开发拖拽进度条滑动组件
Sep 21 #Javascript
layui点击弹框页面 表单请求的方法
Sep 21 #Javascript
使用vue制作滑动标签
Sep 21 #Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 #Javascript
Vue插件之滑动验证码
Sep 21 #Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 #Javascript
You might like
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
pandas的排序和排名的具体使用
2019/07/31 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
讲文明树新风演讲稿
2014/05/12 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书