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); } } };