From b3dfb4997f4db2db195094558864a7b1fbe0f6ca Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Thu, 10 Dec 2020 21:00:30 +0800
Subject: [PATCH] docs(PullRefresh): use composition api

---
 src/pull-refresh/README.md       | 28 ++++++++------
 src/pull-refresh/README.zh-CN.md | 28 ++++++++------
 src/pull-refresh/demo/index.vue  | 65 +++++++++++++++++---------------
 3 files changed, 66 insertions(+), 55 deletions(-)

diff --git a/src/pull-refresh/README.md b/src/pull-refresh/README.md
index 8d9baa186..310cb7bb5 100644
--- a/src/pull-refresh/README.md
+++ b/src/pull-refresh/README.md
@@ -17,29 +17,33 @@ app.use(PullRefresh);
 The `refresh` event will be Emitted when pull refresh, you should set `v-model` to `false` to reset loading status after process refresh event.
 
 ```html
-<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
-  <p>Refresh Count: {{ count }}</p>
+<van-pull-refresh v-model="state.loading" @refresh="onRefresh">
+  <p>Refresh Count: {{ state.count }}</p>
 </van-pull-refresh>
 ```
 
 ```js
+import { reactive } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       count: 0,
-      isLoading: false,
-    };
-  },
-  methods: {
-    onRefresh() {
+      loading: false,
+    });
+    const onRefresh = () => {
       setTimeout(() => {
         Toast('Refresh Success');
-        this.isLoading = false;
-        this.count++;
+        state.loading = false;
+        state.count++;
       }, 1000);
-    },
+    };
+
+    return {
+      state,
+      onRefresh,
+    };
   },
 };
 ```
diff --git a/src/pull-refresh/README.zh-CN.md b/src/pull-refresh/README.zh-CN.md
index 35abc5164..f12bd657f 100644
--- a/src/pull-refresh/README.zh-CN.md
+++ b/src/pull-refresh/README.zh-CN.md
@@ -21,29 +21,33 @@ app.use(PullRefresh);
 下拉刷新时会触发 `refresh` 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 `v-model` 设置为 `false`，表示加载完成。
 
 ```html
-<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
-  <p>刷新次数: {{ count }}</p>
+<van-pull-refresh v-model="state.loading" @refresh="onRefresh">
+  <p>刷新次数: {{ state.count }}</p>
 </van-pull-refresh>
 ```
 
 ```js
+import { reactive } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       count: 0,
-      isLoading: false,
-    };
-  },
-  methods: {
-    onRefresh() {
+      loading: false,
+    });
+    const onRefresh = () => {
       setTimeout(() => {
         Toast('刷新成功');
-        this.isLoading = false;
-        this.count++;
+        state.loading = false;
+        state.count++;
       }, 1000);
-    },
+    };
+
+    return {
+      state,
+      onRefresh,
+    };
   },
 };
 ```
diff --git a/src/pull-refresh/demo/index.vue b/src/pull-refresh/demo/index.vue
index 9167711ea..fb47d2a25 100644
--- a/src/pull-refresh/demo/index.vue
+++ b/src/pull-refresh/demo/index.vue
@@ -1,14 +1,14 @@
 <template>
   <van-tabs>
     <van-tab :title="t('basicUsage')">
-      <van-pull-refresh v-model="isLoading" @refresh="onRefresh(true)">
+      <van-pull-refresh v-model="loading" @refresh="onRefresh(true)">
         <p>{{ tips }}</p>
       </van-pull-refresh>
     </van-tab>
 
     <van-tab :title="t('successTip')">
       <van-pull-refresh
-        v-model="isLoading"
+        v-model="loading"
         :success-text="t('success')"
         @refresh="onRefresh(false)"
       >
@@ -18,7 +18,7 @@
 
     <van-tab :title="t('customTips')">
       <van-pull-refresh
-        v-model="isLoading"
+        v-model="loading"
         head-height="80"
         @refresh="onRefresh(true)"
       >
@@ -42,6 +42,10 @@
 </template>
 
 <script>
+import { computed, onMounted, reactive, toRefs } from 'vue';
+import { useTranslate } from '../../composables/use-translate';
+import Toast from '../../toast';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -60,47 +64,46 @@ export default {
     },
   },
 
-  data() {
-    return {
+  setup() {
+    const t = useTranslate();
+    const state = reactive({
       count: 0,
-      isLoading: false,
-    };
-  },
+      loading: false,
+    });
 
-  computed: {
-    tips() {
-      if (this.count) {
-        return `${this.t('text')}: ${this.count}`;
+    const tips = computed(() => {
+      if (state.count) {
+        return `${t('text')}: ${state.count}`;
       }
+      return t('try');
+    });
 
-      return this.t('try');
-    },
-  },
+    const onRefresh = (showToast) => {
+      setTimeout(() => {
+        if (showToast) {
+          Toast(t('success'));
+        }
+        state.loading = false;
+        state.count++;
+      }, 1000);
+    };
 
-  mounted() {
-    this.preloadImage();
-  },
-
-  methods: {
-    preloadImage() {
+    const preloadImage = () => {
       // preload doge image
       const doge = new Image();
       const dogeFire = new Image();
 
       doge.src = 'https://b.yzcdn.cn/vant/doge.png';
       dogeFire.src = 'https://b.yzcdn.cn/vant/doge-fire.jpg';
-    },
+    };
 
-    onRefresh(showToast) {
-      setTimeout(() => {
-        if (showToast) {
-          this.$toast(this.t('success'));
-        }
+    onMounted(preloadImage);
 
-        this.isLoading = false;
-        this.count++;
-      }, 1000);
-    },
+    return {
+      ...toRefs(state),
+      tips,
+      onRefresh,
+    };
   },
 };
 </script>