[new feauture] PullRefresh: add success-text、success-duration props (#2709)

packages/pull-refresh/en-US.md

@@ -47,6 +47,8 @@ export default {
 | pulling-text | Text to show when pulling | `String` | `Pull to refresh...` |
 | loosing-text | Text to show when loosing | `String` | `Loose to refresh...` |
 | loading-text | Text to show when loading | `String` | `Loading...` |
+| success-text | Text to show when loading success | `String` | - |
+| success-duration | Success text display duration(ms) | `String` | 500 |
 | animation-duration | Animation duration | `Number` | `300` |
 | head-height | Height of head | `Number` | `50` |
 | disabled | Whether to disable | `Boolean` | `false` |

packages/pull-refresh/index.js

@@ -4,12 +4,14 @@ import Touch from '../mixins/touch';
 import { getScrollTop, getScrollEventTarget } from '../utils/scroll';
 
 const [sfc, bem, t] = use('pull-refresh');
+const TEXT_STATUS = ['pulling', 'loosing', 'success'];
 
 export default sfc({
   mixins: [Touch],
 
   props: {
     disabled: Boolean,
+    successText: String,
     pullingText: String,
     loosingText: String,
     loadingText: String,
@@ -17,6 +19,10 @@ export default sfc({
       type: Boolean,
       required: true
     },
+    successDuration: {
+      type: Number,
+      default: 500
+    },
     animationDuration: {
       type: Number,
       default: 300
@@ -37,14 +43,22 @@ export default sfc({
 
   computed: {
     untouchable() {
-      return this.status === 'loading' || this.disabled;
+      return this.status === 'loading' || this.status === 'success' || this.disabled;
     }
   },
 
   watch: {
-    value(val) {
+    value(loading) {
       this.duration = this.animationDuration;
-      this.getStatus(val ? this.headHeight : 0, val);
+
+      if (!loading && this.successText) {
+        this.status = 'success';
+        setTimeout(() => {
+          this.setStatus(0);
+        }, this.successDuration);
+      } else {
+        this.setStatus(loading ? this.headHeight : 0, loading);
+      }
     }
   },
 
@@ -75,7 +89,7 @@ export default sfc({
 
       if (this.ceiling && this.deltaY >= 0) {
         if (this.direction === 'vertical') {
-          this.getStatus(this.ease(this.deltaY));
+          this.setStatus(this.ease(this.deltaY));
           event.cancelable && event.preventDefault();
         }
       }
@@ -85,11 +99,11 @@ export default sfc({
       if (!this.untouchable && this.ceiling && this.deltaY) {
         this.duration = this.animationDuration;
         if (this.status === 'loosing') {
-          this.getStatus(this.headHeight, true);
+          this.setStatus(this.headHeight, true);
           this.$emit('input', true);
           this.$emit('refresh');
         } else {
-          this.getStatus(0);
+          this.setStatus(0);
         }
       }
     },
@@ -108,7 +122,7 @@ export default sfc({
           : Math.round(headHeight * 1.5 + (height - headHeight * 2) / 4);
     },
 
-    getStatus(height, isLoading) {
+    setStatus(height, isLoading) {
       this.height = height;
 
       const status = isLoading
@@ -134,7 +148,7 @@ export default sfc({
     };
 
     const Status = this.slots(status) || [
-      (status === 'pulling' || status === 'loosing') && <div class={bem('text')}>{text}</div>,
+      TEXT_STATUS.indexOf(status) !== -1 && <div class={bem('text')}>{text}</div>,
       status === 'loading' && (
         <div class={bem('loading')}>
           <Loading />

packages/pull-refresh/zh-CN.md

@@ -48,6 +48,8 @@ export default {
 | pulling-text | 下拉过程文案 | `String` | `下拉即可刷新...` | - |
 | loosing-text | 释放过程文案 | `String` | `释放即可刷新...` | - |
 | loading-text | 加载过程文案 | `String` | `加载中...` | - |
+| success-text | 加载成功提示文案 | `String` | - | 1.6.2 |
+| success-duration | 加载成功提示时长(ms) | `String` | 500 | 1.6.2 |
 | animation-duration | 动画时长 | `Number` | `300` | - |
 | head-height | 顶部内容高度 | `Number` | `50` | - |
 | disabled | 是否禁用 | `Boolean` | `false` | 1.1.10 |