feat(PullRefresh): add success slot

src/pull-refresh/README.md

@@ -42,6 +42,20 @@ export default {
 }
 ```
 
+### Success Tip
+
+Use `success-text` to set the success prompt after the refresh is successful
+
+```html
+<van-pull-refresh
+  v-model="isLoading"
+  success-text="Refresh success"
+  @refresh="onRefresh"
+>
+  <p>Refresh Count: {{ count }}</p>
+</van-pull-refresh>
+```
+
 ## API
 
 ### Props
@@ -66,10 +80,11 @@ export default {
 
 ### Slots
 
-| Name | Description | scoped-slot |
+| Name | Description | SlotProps |
 |------|------|------|
 | default | Default slot | - |
 | normal | Content of head when at normal status | - |
 | pulling | Content of head when at pulling | { distance } |
 | loosing | Content of head when at loosing | { distance } |
 | loading | Content of head when at loading | { distance } |
+| success | Content of head when succeed | - |

src/pull-refresh/README.zh-CN.md

@@ -42,18 +42,32 @@ export default {
 }
 ```
 
+### 刷新成功提示
+
+通过`success-text`可以设置刷新成功后的顶部提示文案
+
+```html
+<van-pull-refresh
+  v-model="isLoading"
+  success-text="刷新成功"
+  @refresh="onRefresh"
+>
+  <p>刷新次数: {{ count }}</p>
+</van-pull-refresh>
+```
+
 ## API
 
 ### Props
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
-| v-model | 是否在加载中 | *boolean* | - | - |
+| v-model | 是否处于加载中状态 | *boolean* | - | - |
-| pulling-text | 下拉过程文案 | *string* | `下拉即可刷新...` | - |
+| pulling-text | 下拉过程提示文案 | *string* | `下拉即可刷新...` | - |
-| loosing-text | 释放过程文案 | *string* | `释放即可刷新...` | - |
+| loosing-text | 释放过程提示文案 | *string* | `释放即可刷新...` | - |
-| loading-text | 加载过程文案 | *string* | `加载中...` | - |
+| loading-text | 加载过程提示文案 | *string* | `加载中...` | - |
-| success-text | 加载成功提示文案 | *string* | - | - |
+| success-text | 刷新成功提示文案 | *string* | - | - |
-| success-duration | 加载成功提示时长(ms) | *number* | `500` | - |
+| success-duration | 刷新成功提示展示时长(ms) | *number* | `500` | - |
 | animation-duration | 动画时长 | *number* | `300` | - |
 | head-height | 顶部内容高度 | *number* | `50` | - |
 | disabled | 是否禁用下拉刷新 | *boolean* | `false` | - |
@@ -66,13 +80,14 @@ export default {
 
 ### Slots
 
-| 名称 | 说明 | scoped-slot 参数 |
+| 名称 | 说明 | SlotProps |
 |------|------|------|
 | default | 自定义内容 | - |
 | normal | 非下拉状态时顶部内容 | - |
 | pulling | 下拉过程中顶部内容 | { distance: 当前下拉距离 } |
 | loosing | 释放过程中顶部内容 | { distance: 当前下拉距离 } |
 | loading | 加载过程中顶部内容 | { distance: 当前下拉距离 } |
+| success | 刷新成功提示内容 | - |
 
 ## 常见问题
 

src/pull-refresh/demo/index.vue

@@ -1,13 +1,22 @@
 <template>
   <demo-section name="pull-refresh">
+    <van-tabs>
+      <van-tab :title="$t('basicUsage')">
+        <van-pull-refresh v-model="isLoading" @refresh="onRefresh(true)">
+          <p>{{ tips }}</p>
+        </van-pull-refresh>
+      </van-tab>
+
+      <van-tab :title="$t('successTip')">
         <van-pull-refresh
           v-model="isLoading"
-      @refresh="onRefresh"
+          :success-text="$t('success')"
+          @refresh="onRefresh(false)"
         >
-      <demo-block :title="$t('basicUsage')">
+          <p>{{ tips }}</p>
-        <p>{{ $t('text') }}: {{ count }}</p>
-      </demo-block>
         </van-pull-refresh>
+      </van-tab>
+    </van-tabs>
   </demo-section>
 </template>
 
@@ -16,11 +25,15 @@ export default {
   i18n: {
     'zh-CN': {
       text: '刷新次数',
-      success: '刷新成功'
+      success: '刷新成功',
+      successTip: '刷新成功提示',
+      try: '下拉试试'
     },
     'en-US': {
       text: 'Refresh Count',
-      success: 'Refresh success'
+      success: 'Refresh success',
+      successTip: 'Success Tip',
+      try: 'Try it down'
     }
   },
 
@@ -31,10 +44,23 @@ export default {
     };
   },
 
+  computed: {
+    tips() {
+      if (this.count) {
+        return `${this.$t('text')}: ${this.count}`;
+      }
+
+      return this.$t('try');
+    }
+  },
+
   methods: {
-    onRefresh() {
+    onRefresh(showToast) {
       setTimeout(() => {
+        if (showToast) {
           this.$toast(this.$t('success'));
+        }
+
         this.isLoading = false;
         this.count++;
       }, 500);
@@ -44,7 +70,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-pull-refresh {
   background-color: @white;
@@ -57,7 +83,8 @@ export default {
   }
 
   p {
-    margin: @padding-xs 0 0 @padding-md;
+    margin: 0;
+    padding: @padding-md 0 0 @padding-md;
   }
 }
 </style>

src/pull-refresh/index.js

@@ -54,14 +54,12 @@ export default createComponent({
     value(loading) {
       this.duration = this.animationDuration;
 
-      if (!loading && this.successText) {
+      if (loading) {
-        this.status = 'success';
+        this.setStatus(this.headHeight, true);
-
+      } else if (this.slots('success') || this.successText) {
-        setTimeout(() => {
+        this.showSuccessTip();
-          this.setStatus(0);
-        }, this.successDuration);
       } else {
-        this.setStatus(loading ? this.headHeight : 0, loading);
+        this.setStatus(0, false);
       }
     }
   },
@@ -173,6 +171,14 @@ export default createComponent({
       }
 
       return nodes;
+    },
+
+    showSuccessTip() {
+      this.status = 'success';
+
+      setTimeout(() => {
+        this.setStatus(0);
+      }, this.successDuration);
     }
   },
 

src/pull-refresh/test/__snapshots__/demo.spec.js.snap

@@ -2,11 +2,25 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
+  <div class="van-tabs van-tabs--line">
+    <div class="van-tabs__wrap van-hairline--top-bottom">
+      <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+        <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">基础用法<!----></span></div>
+        <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">刷新成功提示<!----></span></div>
+        <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+      </div>
+    </div>
+    <div class="van-tabs__content">
+      <div role="tabpanel" class="van-tab__pane" style="">
         <div class="van-pull-refresh">
           <div class="van-pull-refresh__track" style="transition-duration: 0ms;">
             <div class="van-pull-refresh__head"></div>
-      <div>
+            <p>下拉试试</p>
-        <p>刷新次数: 0</p>
+          </div>
+        </div>
+      </div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
       </div>
     </div>
   </div>

src/pull-refresh/test/__snapshots__/index.spec.js.snap

@@ -80,6 +80,14 @@ exports[`not in page top 1`] = `
 </div>
 `;
 
+exports[`render success slot 1`] = `
+<div class="van-pull-refresh">
+  <div class="van-pull-refresh__track" style="transition-duration: 300ms; transform: translate3d(0,50px, 0);">
+    <div class="van-pull-refresh__head">Custom Success</div>
+  </div>
+</div>
+`;
+
 exports[`render success text 1`] = `
 <div class="van-pull-refresh">
   <div class="van-pull-refresh__track" style="transition-duration: 300ms; transform: translate3d(0,50px, 0);">

src/pull-refresh/test/index.spec.js

@@ -119,9 +119,7 @@ test('render success text', async () => {
   });
 
   const track = wrapper.find('.van-pull-refresh__track');
-  trigger(track, 'touchstart', 0, 0);
+  triggerDrag(track, 0, 100);
-  trigger(track, 'touchmove', 0, 100);
-  trigger(track, 'touchend', 0, 100);
 
   await later();
 
@@ -136,3 +134,25 @@ test('render success text', async () => {
   await later();
   expect(wrapper).toMatchSnapshot();
 });
+
+test('render success slot', async () => {
+  const wrapper = mount(PullRefresh, {
+    scopedSlots: {
+      success: () => 'Custom Success'
+    },
+    listeners: {
+      input(value) {
+        wrapper.setProps({ value });
+      }
+    }
+  });
+
+  const track = wrapper.find('.van-pull-refresh__track');
+  triggerDrag(track, 0, 100);
+
+  await later();
+
+  expect(wrapper.vm.value).toBeTruthy();
+  wrapper.setProps({ value: false });
+  expect(wrapper).toMatchSnapshot();
+});