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 相关文章推荐
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
详解JS中的attribute属性
Apr 25 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 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
PHP 常见郁闷问题答解
2006/11/25 PHP
PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
php中用数组的方法设置cookies
2011/04/21 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
php实现aes加密类分享
2014/02/16 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
python类装饰器用法实例
2015/06/04 Python
Python简单计算文件夹大小的方法
2015/07/14 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
python简单区块链模拟详解
2019/07/03 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
python和JavaScript哪个容易上手
2020/06/23 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
python中操作文件的模块的方法总结
2021/02/04 Python
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
俄罗斯女装店:12storeez
2019/10/25 全球购物
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
导师工作推荐信
2015/03/27 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
解除合同协议书范本
2016/03/21 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
python运算符之与用户交互
2022/04/13 Python