[Improvement] PullRefresh: add refersh event (#625)

docs/demos/views/pull-refresh.vue

@@ -1,5 +1,5 @@
 <template>
-  <van-pull-refresh v-model="isLoading">
+  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
     <demo-section name="pull-refresh" background="#fff">
       <demo-block :title="$t('basicUsage')">
         <p>{{ $t('text') }}: {{ count }}</p>
@@ -12,10 +12,12 @@
 export default {
   i18n: {
     'zh-CN': {
-      text: '刷新次数'
+      text: '刷新次数',
+      success: '刷新成功'
     },
     'en-US': {
-      text: 'Refresh Count'
+      text: 'Refresh Count',
+      success: 'Refresh success'
     }
   },
 
@@ -26,15 +28,13 @@ export default {
     };
   },
 
-  watch: {
-    isLoading() {
-      if (this.isLoading) {
-        setTimeout(() => {
-          Toast('刷新成功');
-          this.isLoading = false;
-          this.count++;
-        }, 500);
-      }
+  methods: {
+    onRefresh() {
+      setTimeout(() => {
+        Toast(this.$t('success'));
+        this.isLoading = false;
+        this.count++;
+      }, 500);
     }
   }
 };

docs/markdown/en-US/pull-refresh.md

@@ -9,14 +9,11 @@ Vue.use(PullRefresh);
 
 ### Usage
 
+#### Basic Usage
+The `refresh` event will be triggered when pull refresh, you should set `v-model` to `false` to reset loading status after process refresh event.
+
 ```html
-<!-- use v-model to control loading status -->
-<van-pull-refresh
-  v-model="isLoading"
-  pulling-text="Pull to refresh..."
-  loosing-text="Loose to refresh..."
-  loading-text="Loading..."
->
+<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
   <p>Refresh Count: {{ count }}</p>
 </van-pull-refresh>
 ```
@@ -30,15 +27,13 @@ export default {
     }
   },
 
-  watch: {
-    isLoading() {
-      if (this.isLoading) {
-        setTimeout(() => {
-          Toast('Refresh Success');
-          this.isLoading = false;
-          this.count++;
-        }, 500);
-      }
+  methods: {
+    onRefresh() {
+      setTimeout(() => {
+        this.$toast('Refresh Success');
+        this.isLoading = false;
+        this.count++;
+      }, 500);
     }
   }
 }
@@ -49,12 +44,19 @@ export default {
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | v-model | Loading status | `Boolean` | - | - |
-| pulling-text | Text to show when pulling | `String` | `下拉即可刷新...` | - |
-| loosing-text | Text to show when loosing | `String` | `释放即可刷新...` | - |
-| loading-text | Text to show when loading | `String` | `加载中...` | - |
+| 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...` | - |
 | animation-duration | Animation duration | `Number` | `300` | - |
 | head-height | Height of head | `Number` | `50` | - |
 
+### Event
+
+| Event | Description | Parameters |
+|-----------|-----------|-----------|
+| refresh | Triggered when pull refresh | - |
+
+
 ### Slot
 
 | name | Description |

docs/markdown/zh-CN/pull-refresh.md

@@ -9,9 +9,11 @@ Vue.use(PullRefresh);
 
 ### 代码演示
 
+#### 基础用法
+下拉刷新时会触发 `refresh` 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 `v-model` 设置为 `false`，表示加载完成。
+
 ```html
-<!-- 通过 v-model 控制加载状态 -->
-<van-pull-refresh v-model="isLoading">
+<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
   <p>刷新次数: {{ count }}</p>
 </van-pull-refresh>
 ```
@@ -25,15 +27,13 @@ export default {
     }
   },
 
-  watch: {
-    isLoading() {
-      if (this.isLoading) {
-        setTimeout(() => {
-          Toast('刷新成功');
-          this.isLoading = false;
-          this.count++;
-        }, 500);
-      }
+  methods: {
+    onRefresh() {
+      setTimeout(() => {
+        this.$toast('刷新成功');
+        this.isLoading = false;
+        this.count++;
+      }, 500);
     }
   }
 }
@@ -50,6 +50,12 @@ export default {
 | animation-duration | 动画时长 | `Number` | `300` | - |
 | head-height | 顶部内容高度 | `Number` | `50` | - |
 
+### Event
+
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| refresh | 下拉刷新时触发 | - |
+
 ### Slot
 
 | 名称 | 说明 |

packages/pull-refresh/index.vue

@@ -127,6 +127,7 @@ export default create({
         if (this.status === 'loosing') {
           this.getStatus(this.headHeight, true);
           this.$emit('input', true);
+          this.$emit('refresh');
         } else {
           this.getStatus(0);
         }

test/unit/specs/pull-refresh.spec.js

@@ -56,11 +56,15 @@ describe('PullRefresh', () => {
       }
     });
 
+    const refreshSpy = sinon.spy();
+    wrapper.vm.$on('refresh', refreshSpy);
+
     wrapper.vm.$on('input', value => {
       wrapper.vm.value = value;
 
       setTimeout(() => {
         wrapper.vm.value = false;
+        expect(refreshSpy.calledOnce).to.be.true;
         setTimeout(() => {
           expect(wrapper.vm.status).to.equal('normal');
           done();