自动给vue-resource的ajax请求添加loadingbar。默认请求时间超过300毫秒才显示,可以手动配置延迟的时间
vuejs and vue-resource (axios) required;
npm install vueLoadingBar --save
<head> ... <link href="src/loadingbar.min.css" rel="stylesheet" type="text/css" /> </head> <body> ... <script src='src/loadingbar.js'></script> </body>or
require('src/loadingbar.js')(Vue);with webpack
... import 'vueLoadingBar/src/loadingbar.css'; import Vue from 'vue'; import VueResource from 'vue-resource'; import vueLoadingBar from 'vueLoadingBar'; Vue.use(VueResource); Vue.use(vueLoadingBar);如果使用其他支持interceptors的第三方库,需要将第三方库挂载到Vue.http;
使用axios时可以不做任何处理或者绑定到Vue.axios、Vue.$axios
// 设置请求超过多少毫秒才显示,默认300毫秒 new Vue({...}).loadingBarDelay = 100;// 设置全局禁用loadingbar new Vue().enableLoadingBar = false;当前请求禁用loadingbar(不影响其他请求)。只需要在请求的config部分(如axios request)设置$hideLoadingBar为true即可
// 设置此次请求不显示loadingbar http.get(url, {$hideLoadingBar: true}).then(...); // get http.post(url, data, {$hideLoadingBar: true}).then(...); // post