基于Vuejs的进度条插件——NProgress
NProgress——当项目中有些页面请求内容较多,响应时间较长时,为了让用户清晰看到请求进度,避免长时间等待导致体验不佳而开发的一款轻量级插件。安装NPMnpm install --save nprogressNProgress的用法调用 start()或者done()来控制进度条开始或者结束。nprogress.start()nprogress.done()调用inc()随机增长进度条,注意,
·
NProgress——当项目中有些页面请求内容较多,响应时间较长时,为了让用户清晰看到请求进度,避免长时间等待导致体验不佳而开发的一款轻量级插件。
安装
NPM
npm install --save nprogress
NProgress的用法
调用 start()或者done()来控制进度条开始或者结束。
nprogress.start()
nprogress.done()
调用inc()随机增长进度条,注意,这个方法永远不会让进度条达到100%。
nprogress.inc()
调用 .set(n)来设置进度,n是0-1的数字。
nprogress.set(0.1)
调用configure()进行参数设置
nprogress.configure({
easing: 'ease', // 动画方式
speed: 200, // 递增进度条的速度,默认200
trickleSpeed: 200, // 自动递增间隔
trickle: true //开启关闭自动递增行为
showSpinner: true //开启关闭进度条
})
项目中的运用
- 全局引用nprogress, 在main.js中引入npmrogress
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
- nprogress参数设置
nprogress.config({ showSpinner: false }) // 默认关闭进度条
- 对路由钩子进行设置
// 路由进入前
router.beforeEach((to, from, next) => {
nprogress.start() // 每次切换页面调用滚动条
next()
})
router.afterEach(() => {
nprogress.done() // 路由进入后关闭进度条
})
- 修改nprogress默认样式
在app.vue中添加样式修改nprogress默认样式,记得添加 !important来覆盖原有样式
#nprogress .bar {
background: #66B1FF !important; // 自定义颜色
height: 20px !important; // 自定义高度
}
好记性不如烂笔头,提升自己的同时希望也能帮到你哟!
参考:https://www.toutiao.com/i6718992880599302659/?group_id=6718992880599302659
更多推荐
已为社区贡献2条内容
所有评论(0)