搜索到
1
篇与
的结果
-
Vue使用NProgress NProgressNProgress就是在页面顶端显示一个进度条。安装npm install --save nprogress使用引入NProgress我们新建一个global.js文件，通过钩子，在路由开始前，启动NProgress，路由结束后，停止NProgressimport 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.jsimport './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即右侧的一个东西
