Laughing
Vue使用NProgress
05/20
本文最后更新于2024年03月18日，已超过53天没有更新。如果文章内容或图片资源失效，请留言反馈，我会及时处理，谢谢！
NProgress
NProgress就是在页面顶端显示一个进度条。
安装
npm install --save nprogress使用
引入NProgress
我们新建一个global.js文件，通过钩子，在路由开始前，启动NProgress，路由结束后，停止NProgress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import router from './router'
router.beforeEach((to, from, next) => {
NProgress.start()
setTimeout(() => {
next()
}, 1000)
}
)
router.afterEach((to, from) => {
NProgress.done()
})在main.js中引入global.js
import './global'NProgress方法说明
//方法
NProgress.start() - 显示进度条
NProgress.set(0.4) - 设置百分比
NProgress.inc() - 稍微增加
NProgress.done() - 完成进度(进度条消失)修改NProgress颜色
颜色配置是在App.vue中的加入样式
#nprogress .bar {
background: red !important;
}NProgress配置
可以通过调用 .set(n)来设置进度，n是0-1的数字。
NProgress.set(0.0); // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0); // Sorta same as .done()
可以使用inc()随机增长进度条，注意，这个方法永远不会让进度条达到100%。
NProgress.inc();
NProgress.configure({ showSpinner: false }) //禁用进度环
NProgress.configure({ trickle : false }) //关闭进度条步进
NProgress.configure({ trickleRate : 10}) //每次步进增长多少
NProgress.configure({ trickleSpeed : 200}) //每次步进间隔，单位毫秒ms
NProgress.configure({ easing: 'linear'}) //动画方向
NProgress.configure({ speed : 10}) //动画速度，单位毫秒ms
NProgress.configure({ minimum : 0.08}) //最小百分比spinner即右侧的一个东西
{!{data:image/webp;base64,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}!}