From a698d56c8db412ce113b0932476474d0488ae4e2 Mon Sep 17 00:00:00 2001 From: liujiang Date: Fri, 25 Jan 2019 15:13:15 +0800 Subject: [PATCH 1/4] =?UTF-8?q?indicator=E6=8F=90=E4=BE=9B=E4=BC=A0?= =?UTF-8?q?=E5=85=A5=E6=8C=81=E7=BB=AD=E6=97=B6=E9=97=B4=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/pages/indicator.vue | 4 ++-- packages/indicator/README.md | 4 +++- packages/indicator/index.js | 9 ++++++++- 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/example/pages/indicator.vue b/example/pages/indicator.vue index f649ae24..26c2db62 100644 --- a/example/pages/indicator.vue +++ b/example/pages/indicator.vue @@ -31,8 +31,8 @@ export default { methods: { openIndicator() { - Indicator.open(); - setTimeout(() => Indicator.close(), 2000); + Indicator.open({duration: 3000 }); + // setTimeout(() => Indicator.close(), 2000); }, openIndicatorWithSpinner() { diff --git a/packages/indicator/README.md b/packages/indicator/README.md index ab50ff0f..9c7bd30d 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 }); ``` +  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 | | # License MIT diff --git a/packages/indicator/index.js b/packages/indicator/index.js index c7f56a94..87ee36cb 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) { + timerId = setTimeout( + () => instance.visible && (instance.visible = false), + options.duration + ); + } }); }, close() { if (instance) { instance.visible = false; + timerId && clearTimeout(timerId); } } }; From 7bc419719370197e45df06743cfdc1474da1b8f0 Mon Sep 17 00:00:00 2001 From: liujiang Date: Fri, 25 Jan 2019 15:20:54 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/indicator/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/indicator/README.md b/packages/indicator/README.md index 9c7bd30d..0f315a52 100644 --- a/packages/indicator/README.md +++ b/packages/indicator/README.md @@ -43,7 +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 | | +| duration | duration time | Number, Number of milliseconds | | # License MIT From c15432e9c93abf0498012ad0c4f729d99306263d Mon Sep 17 00:00:00 2001 From: liujiang Date: Fri, 25 Jan 2019 15:22:36 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E5=AF=B9=E9=BD=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/indicator/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/indicator/README.md b/packages/indicator/README.md index 0f315a52..b6291a0a 100644 --- a/packages/indicator/README.md +++ b/packages/indicator/README.md @@ -43,7 +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 | | +| duration | duration time | Number, Number of milliseconds | | # License MIT From 9de1c77dc0afde5733a3d48c5a425d98dfdc2421 Mon Sep 17 00:00:00 2001 From: liujiang Date: Fri, 25 Jan 2019 16:46:39 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E6=8F=90=E4=BE=9B=E5=9B=9E=E8=B0=83?= =?UTF-8?q?=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/pages/indicator.vue | 10 +++++++--- packages/indicator/README.md | 4 ++-- packages/indicator/index.js | 10 +++++----- 3 files changed, 14 insertions(+), 10 deletions(-) diff --git a/example/pages/indicator.vue b/example/pages/indicator.vue index 26c2db62..ef87d073 100644 --- a/example/pages/indicator.vue +++ b/example/pages/indicator.vue @@ -5,6 +5,7 @@ 点击弹出 Indicator 可配置 spinner 点击弹出带有文字的 Indicator + 点击弹出带有定时回调的 Indicator @@ -31,8 +32,8 @@ export default { methods: { openIndicator() { - Indicator.open({duration: 3000 }); - // setTimeout(() => Indicator.close(), 2000); + Indicator.open(); + setTimeout(() => Indicator.close(), 2000); }, openIndicatorWithSpinner() { @@ -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 b6291a0a..8b86c637 100644 --- a/packages/indicator/README.md +++ b/packages/indicator/README.md @@ -29,7 +29,7 @@ Indicator.open('Loading...'); Open an indicator with an object: ```Javascript -Indicator.open({ text:'Loading...', spinnerType: 'fading-circle', duration: 10000 }); +Indicator.open({ text:'Loading...', spinnerType: 'fading-circle', duration: 10000, closeFn: () => alert('success') }); ```   If you have duration, it will close automatically @@ -44,6 +44,6 @@ 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 87ee36cb..ed77b576 100644 --- a/packages/indicator/index.js +++ b/packages/indicator/index.js @@ -17,11 +17,11 @@ export default { Vue.nextTick(() => { instance.visible = true; - if (options.duration) { - timerId = setTimeout( - () => instance.visible && (instance.visible = false), - options.duration - ); + if (options.duration && options.duration > 0) { + timerId = setTimeout(() => { + if (instance.visible) instance.visible = false; + if (typeof options.closeFn === 'function') options.closeFn(); + }, options.duration); } }); },