vue 使用nprogress 实现顶部加载进度条效果

一、下载安装

yarn add nprogress
npm i nprogress
cnpm i nprogress

二、引入

//可以在router.js 和 axios.js文件中使用
import NProgress from 'nprogress'
//样式可以放在main.js中全局样式
import 'nprogress/nprogress.css'

三、配置使用

//页面打开时显示
router.beforeEach((to,from,next) => {
  NProgress.start() 
  next()
})
router.afterEach(() => {
  NProgress.done()
})
//axios异步请求时
NProgress.done()
放入拦截器中使用

进度条颜色修改:

在vue文件中修改,建议App.vue中
 #nprogress .bar {
      background: red !important; //自定义颜色
  }

简单配置:

//控制速度,一般不用特意控制,进度条速度随网页加载速度
NProgress.inc(0.2)
NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })

四、其他配置项内容

1.通过 minimum 来修改最小百分比
2.NProgress.configure({ minimum: 0.1 });
3.通过 ease(一个 CSS 中的 easing 值) 调整动画设置和速度 speed (毫秒ms)
4.NProgress.configure({ ease: ‘ease’, speed: 500 });
5.关闭进度条步进,设置 trickle 为 false。
6.NProgress.configure({ trickle: false });
7.调整 trickleRate (每次步进增长多少) 和 trickleSpeed (步进间隔,单位毫秒ms)
8.NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });
9.禁用进度环,设置 showSpinner 为 false
10.NProgress.configure({ showSpinner: false });

五、灵活使用

  1. NProgress.start() — 显示进度条
  2. NProgress.set(0.4) —设置百分比
  3. NProgress.inc() — 增加一点点
  4. NProgress.done() — 完成进度条
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以帮你写一个Vue项目实现页面加载进度条。 首先,在Vue项目中可以使用NProgress库来实现页面加载进度条的功能。你可以通过npm安装NProgress库,然后在main.js文件中引入它。 ```javascript import NProgress from 'nprogress' import 'nprogress/nprogress.css' NProgress.configure({ showSpinner: false }) ``` 然后,在路由导航守卫中使用NProgress来控制进度条的显示和隐藏。在beforeEach函数中,使用NProgress.start()来显示进度条;在afterEach函数中使用NProgress.done()来隐藏进度条。 ```javascript router.beforeEach((to, from, next) => { NProgress.start() next() }) router.afterEach(() => { NProgress.done() }) ``` 最后,在模板中添加进度条的HTML代码。可以放在App.vue文件的template标签中。 ```html <template> <div> <div class="bar" role="bar"></div> </div> </template> <style> .bar { position: fixed; z-index: 1031; top: 0; left: 0; width: 100%; height: 2px; background-color: #46c477; -webkit-transition: height .3s 0s; transition: height .3s 0s; } .nprogress-fade-enter { opacity: 0; } .nprogress-fade-enter-active { opacity: 1; } .nprogress-fade-exit { opacity: 1; } .nprogress-fade-exit-active { opacity: 0; } </style> ``` 这个HTML代码中,我们添加了一个class名为“bar”的div标签用来显示进度条。另外,为了美化进度条,我们还添加了一些CSS样式。 综上所述,以上就是基于NProgress库的Vue项目页面加载进度条实现方法,你可以参考一下。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值