diff --git a/example/pages/indicator.vue b/example/pages/indicator.vue
index f649ae24..ef87d073 100644
--- a/example/pages/indicator.vue
+++ b/example/pages/indicator.vue
@@ -5,6 +5,7 @@
点击弹出 Indicator
可配置 spinner
点击弹出带有文字的 Indicator
+ 点击弹出带有定时回调的 Indicator
@@ -43,9 +44,12 @@
openIndicatorWithText() {
Indicator.open('加载中...');
setTimeout(() => Indicator.close(), 2000);
+ },
+
+ openIndicatorWithTimer() {
+ Indicator.open({ duration: 3000, closeFn: () => alert('Indicator 定时回调成功') });
}
},
-
beforeDestroy() {
Indicator.close();
}
diff --git a/packages/indicator/README.md b/packages/indicator/README.md
index ab50ff0f..8b86c637 100644
--- a/packages/indicator/README.md
+++ b/packages/indicator/README.md
@@ -29,8 +29,9 @@ Indicator.open('Loading...');
Open an indicator with an object:
```Javascript
-Indicator.open({ text:'Loading...', spinnerType: 'fading-circle' });
+Indicator.open({ text:'Loading...', spinnerType: 'fading-circle', duration: 10000, closeFn: () => alert('success') });
```
+ If you have duration, it will close automatically
Then close it:
```Javascript
@@ -42,6 +43,7 @@ Indicator.close();
|-------------|----------------|-------------------------------------------------------------|---------|
| text | indicator text | String | |
| spinnerType | spinner type | 'snake', 'fading-circle', 'double-bounce', 'triple-bounce' | 'snake' |
-
+| duration | duration time | Number, Number of milliseconds | |
+| closeFn | callback function | Function | |
# License
MIT
diff --git a/packages/indicator/index.js b/packages/indicator/index.js
index c7f56a94..ed77b576 100644
--- a/packages/indicator/index.js
+++ b/packages/indicator/index.js
@@ -1,7 +1,7 @@
import Vue from 'vue';
const Indicator = Vue.extend(require('./src/indicator.vue'));
-let instance;
+let instance, timerId;
export default {
open(options = {}) {
@@ -17,12 +17,19 @@ export default {
Vue.nextTick(() => {
instance.visible = true;
+ if (options.duration && options.duration > 0) {
+ timerId = setTimeout(() => {
+ if (instance.visible) instance.visible = false;
+ if (typeof options.closeFn === 'function') options.closeFn();
+ }, options.duration);
+ }
});
},
close() {
if (instance) {
instance.visible = false;
+ timerId && clearTimeout(timerId);
}
}
};