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

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 />