专栏首页vue学习简单又快捷的进度条—NProgress库了解一下

简单又快捷的进度条—NProgress库了解一下

推荐一个小而美的进度条库nprogress

1、介绍

效果

2、安装引入

  • 安装
$ npm install --save nprogress
  • main.js中引入(这里需要注意的是好像文档里使用npm安装的方法没有说要import这个css文件,但是不引入是没效果的)
import NProgress from 'nprogress' 
import 'nprogress/nprogress.css' 
  • 然后你还可以进行一下configure的配置,比如隐藏我上图中右上角的loading图标:
NProgress.configure({ showSpinner: false })

3、使用

  • 用的话你可以单个页面配置,但是像进度条这种东西,一般都是全局配置即可,所以我写在路由守卫中。
使用方式

4、其他

如何修改进度条的颜色呢?

Just edit nprogress.css to your liking. Tip: you probably only want to find and replace occurrences of #29d.

  • 文档说直接改变nprogress.css这个文件即可,这个文件在node_modeules中,所以我们可能需要把这个文件给拿出来,放到我们自己的项目文件中,这样上传git的时候才不会丢失。
  • 然后import引入的时候修改下正确的路径。
修改进度条的颜色

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 5、webpack从0到1-处理css文件

    Ewall
  • 4、webpack从0到1-打包图片资源

    Ewall
  • 浏览器默认样式、1px边框问题、css预编译

    参考链接: 移动端1px解决方案 vue-cli css相关 normalize.css

    Ewall
  • 代码注释的艺术,再也不怕被说代码可读性差啦!

    可能现在不管大家去面试还是在公司上班都会涉及到代码可读性,或者是代码规范。优秀的代码注释可以提高代码可读性,当然优秀的命名规范也可以啦。我们这里就讨论一下代码注...

    拾贰
  • 代码注释的艺术,再也不怕被说代码可读性差啦!

    可能现在不管大家去面试还是在公司上班都会涉及到代码可读性,或者是代码规范。优秀的代码注释可以提高代码可读性,当然优秀的命名规范也可以啦。我们这里就讨论一下代码注...

    拾贰
  • Qt编写安防视频监控系统34-onvif事件订阅

    事件订阅是近期增加的功能,主要是因为遇到越来越多的一个应用场景,能够接收摄像机的报警事件,比如几乎所有的摄像机后面会增加报警输入输出接口,如果用户外接了报警输入...

    feiyangqingyun
  • 基于现有设备研发的新型量子加密系统,速度是当前技术的5至10倍

    镁客网
  • WKWebView 白屏问题

    czjwarrior
  • 张高兴的 Xamarin.Forms 开发笔记:TapGestureRecognizer 的简单介绍与应用

    张高兴
  • 张高兴的 Xamarin.Forms 开发笔记:TapGestureRecognizer 的简单介绍与应用

    张高兴

扫码关注云+社区

领取腾讯云代金券