Skip to content
This repository was archived by the owner on Feb 26, 2020. It is now read-only.

Commit d83f44d

Browse files
douxcdouxc
authored
Merge pull request #1 from douxc/dev
添加axios支持
2 parents 58bcb31 + 11e16c0 commit d83f44d

File tree

9 files changed

+113
-44
lines changed

9 files changed

+113
-44
lines changed

‎README.md‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,24 @@
11
自动给vue-resource的ajax请求添加loadingbar。默认请求时间超过300毫秒才显示，可以手动配置延迟的时间
22

3-
## add loading bar for Vue-resource
4-
vuejs and vue-resource required;
3+
## add loading bar for Vue-resource or axios
4+
vuejs and vue-resource ([axios](https://github.com/mzabriskie/axios)) required;
55

6-
## start
6+
## 截图
7+
8+
![LoadingBar截图](./capture.gif)
9+
10+
## 安装
711
> npm install vueLoadingBar --save
812
9-
```javascript
10-
<link href="src/loadingbar.min.css" rel="stylesheet" type="text/css" />
11-
<script src='src/loadingbar.js'></script>
13+
``` html
14+
<head>
15+
...
16+
<link href="src/loadingbar.min.css" rel="stylesheet" type="text/css" />
17+
</head>
18+
<body>
19+
...
20+
<script src='src/loadingbar.js'></script>
21+
</body>
1222
```
1323

1424
or
@@ -29,6 +39,12 @@ Vue.use(VueResource);
2939
Vue.use(vueLoadingBar);
3040
```
3141

42+
## 注意
43+
44+
如果使用其他支持interceptors的第三方库，需要将第三方库挂载到Vue.http；
45+
46+
使用axios时可以不做任何处理或者绑定到Vue.axios、Vue.$axios
47+
3248
## config
3349

3450
```javascript

‎capture.gif‎

20.2 KB
Loading

‎dist/loadingbar.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/loadingbar.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/example.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,18 @@
1010
<button onclick="_click()">click</button>
1111
<script src="http://cdn.bootcss.com/vue/2.1.8/vue.min.js"></script>
1212
<script src="http://cdn.bootcss.com/vue-resource/1.0.3/vue-resource.min.js"></script>
13+
<!--<script src="https://cdn.bootcss.com/axios/0.16.1/axios.min.js"></script>-->
14+
<script src="../node_modules/mockjs/dist/mock.js"></script>
1315
<script src="../dist/loadingbar.js"></script>
1416
<script>
17+
Mock.mock('./test', {
18+
"string|1-10": "★"
19+
});
1520
function _click() {
16-
Vue.http.get('https://www.github.com').then(function() {}, function() {});
21+
var _http = Vue.http || axios;
22+
_http.get('./test').then(function (data) {
23+
console.log(data);
24+
});
1725
}
1826
</script>
1927
</body>

‎gulpfile.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,17 @@ var rename = require('gulp-rename');
66
var autoprefixer = require('gulp-autoprefixer');
77
var cleanCss = require('gulp-clean-css');
88
var uglify = require('gulp-uglify');
9-
gulp.task('css', function() {
9+
gulp.task('css', function () {
1010
gulp.src('./src/*.css')
11-
.pipe(autoprefixer({ browsers: ['Android >= 4.2', 'iOS >= 9', '> 5%'] }))
11+
.pipe(autoprefixer({browsers: ['Android >= 4.2', 'iOS >= 9', '> 5%']}))
1212
.pipe(cleanCss())
1313
.pipe(gulp.dest('./dist'));
1414
});
15-
gulp.task('js', function() {
15+
gulp.task('js', function () {
1616
gulp.src('./src/*.js').pipe(uglify()).pipe(gulp.dest('./dist'));
1717
});
18-
gulp.task('dist', ['js', 'css']);
18+
gulp.task('dist', ['js', 'css']);
19+
gulp.task('watch', function () {
20+
gulp.watch('./src/*.js', ['js']);
21+
gulp.watch('./src/*.css', ['css']);
22+
});

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"gulp-autoprefixer": "^3.1.1",
1919
"gulp-clean-css": "^2.0.13",
2020
"gulp-rename": "^1.2.2",
21-
"gulp-uglify": "^2.0.0"
21+
"gulp-uglify": "^2.0.0",
22+
"mockjs": "^1.0.1-beta3"
2223
}
2324
}

‎src/loadingbar.css‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,17 @@
99

1010
#LoadingBar {
1111
position: fixed;
12-
pointer-events: none;
1312
display: none;
1413
overflow: hidden;
1514
padding: 1rem;
1615
background: rgba(0, 0, 0, 0.1);
16+
user-select: none;
1717
}
1818

1919
.loading-content {
2020
position: absolute;
21-
width: 4rem;
22-
height: 4rem;
21+
width: 3.5rem;
22+
height: 3.5rem;
2323
margin: auto;
2424
padding: 1rem;
2525
border-radius: 2px;
@@ -29,25 +29,22 @@
2929

3030
.loading-icon {
3131
display: inline-block;
32-
width: 2rem;
33-
height: 2rem;
34-
border-radius: 2rem;
35-
border-left: 2px solid #1e90ff;
36-
border-top: 2px solid #1e90ff;
32+
box-sizing: border-box;
33+
width: 1.5rem;
34+
height: 1.5rem;
35+
border-radius: 50%;
36+
border: 2px dashed #1e90ff;
3737
}
3838

3939
#LoadingBar.show {
4040
display: block;
4141
}
4242

4343
.show .loading-icon {
44-
animation: rotate 500ms linear infinite;
44+
animation: rotate 1.5s linear infinite;
4545
}
4646

4747
@keyframes rotate {
48-
from {
49-
transform: rotate(0deg);
50-
}
5148
to {
5249
transform: rotate(360deg);
5350
}

‎src/loadingbar.js‎

Lines changed: 61 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,57 @@
22
* 自动给vue的请求添加loading框
33
* Created by xinchao.dou on 2016/10/27.
44
*/
5-
(function(global, factory) {
5+
(function (global, factory) {
66
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
77
typeof define === 'function' && define.amd ? define(factory) :
88
(global.VueLoadingBar = factory());
9-
})(this, (function() {
9+
})(this, (function () {
1010
'use strict';
1111
var requestCount = 0;// 请求数量
1212
var delayTimeoutId = 0;
1313
var loadingEle = document.createElement('div');
1414
var loadingBarDelay = 300;
1515

16+
/**
17+
* 隐藏loading框
18+
* @private
19+
*/
20+
function _hideLoading() {
21+
if (requestCount <= 1) {
22+
window.clearTimeout(delayTimeoutId);
23+
loadingEle.classList.remove('show');
24+
}
25+
requestCount--;
26+
}
27+
28+
/**
29+
* 延迟显示loading框
30+
* @param request
31+
* @param next
32+
* @private
33+
*/
34+
function _showLoading(request, next) {
35+
if (requestCount === 0) {
36+
delayTimeoutId = setTimeout(function () {
37+
loadingEle.classList.add('show');
38+
}, loadingBarDelay); // 延迟显示，当请求响应时间过快时不需要显示loading
39+
}
40+
requestCount++;
41+
next && next(_hideLoading); // 如果是vue-resource则有next
42+
}
43+
44+
/**
45+
* 初始化loading框、添加loadingBarDelay属性
46+
* @param Vue
47+
* @constructor
48+
*/
1649
function LoadingBar(Vue) {
1750
Object.defineProperties(Vue.prototype, {
1851
loadingBarDelay: {
19-
get: function() {
52+
get: function () {
2053
return loadingBarDelay;
2154
},
22-
set: function(_loadingBarDelay) {
55+
set: function (_loadingBarDelay) {
2356
loadingBarDelay = Number(_loadingBarDelay);
2457
}
2558
}
@@ -30,21 +63,31 @@
3063
'<icon class="loading-icon"></icon></div>';
3164
document.body.appendChild(loadingEle);
3265
}
33-
Vue.http.interceptors.push(function(request, next) {
34-
if (requestCount === 0) {
35-
delayTimeoutId = setTimeout(function() {
36-
loadingEle.classList.add('show');
37-
}, loadingBarDelay);
38-
}
39-
requestCount++;
40-
next(function() {
41-
if (requestCount <= 1) {
42-
window.clearTimeout(delayTimeoutId);
43-
loadingEle.classList.remove('show');
44-
}
45-
requestCount--;
66+
/**
67+
* 判断使用的是vue-resource还是axios
68+
*/
69+
if (Vue.http) {
70+
Vue.http.interceptors.push(_showLoading);
71+
} else if (Vue.axios || Vue.$axios || axios) {
72+
// axios 支持不绑定到Vue属性上或者绑定为Vue.axios、Vue.$axios
73+
var _axios = Vue.axios || Vue.$axios || axios;
74+
_axios.interceptors.request.use(function (request) {
75+
_showLoading();
76+
return request;
77+
}, function (err) {
78+
_hideLoading();
79+
return Promise.reject(err);
4680
});
47-
});
81+
_axios.interceptors.response.use(function (response) {
82+
_hideLoading();
83+
return response;
84+
}, function (err) {
85+
_hideLoading();
86+
return Promise.reject(err);
87+
});
88+
} else {
89+
console.error('only vue-resource or axios support');
90+
}
4891
}
4992

5093
if (typeof window !== 'undefined' && window.Vue) {

0 commit comments

Comments
 (0)