From 797b978f76238d337bc1e42389c4822d125fbfcc Mon Sep 17 00:00:00 2001
From: "Xing.Wu" <329106954@qq.com>
Date: Thu, 10 Jun 2021 00:23:50 +0800
Subject: [PATCH] feat(docs): InfiniteScroll code for composition (#2193)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 无星 <32910694@qq.com>
---
 website/docs/en-US/infiniteScroll.md | 50 ++++++++++++++++++++++++++++
 website/docs/es/infiniteScroll.md    | 50 ++++++++++++++++++++++++++++
 website/docs/fr-FR/infiniteScroll.md | 50 ++++++++++++++++++++++++++++
 website/docs/jp/infiniteScroll.md    | 50 ++++++++++++++++++++++++++++
 website/docs/zh-CN/infiniteScroll.md | 50 ++++++++++++++++++++++++++++
 5 files changed, 250 insertions(+)

diff --git a/website/docs/en-US/infiniteScroll.md b/website/docs/en-US/infiniteScroll.md
index b45739b510..36b2fd278c 100644
--- a/website/docs/en-US/infiniteScroll.md
+++ b/website/docs/en-US/infiniteScroll.md
@@ -26,6 +26,26 @@ Add `v-infinite-scroll` to the list to automatically execute loading method when
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const count = ref(0);
+      const load = () => {
+        count.value += 2;
+      };
+      return {
+        count,
+        load,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -73,6 +93,36 @@ Add `v-infinite-scroll` to the list to automatically execute loading method when
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref, computed } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const count = ref(10);
+      const loading = ref(false);
+      const noMore = computed(() => count.value >= 20);
+      const disabled = computed(() => loading.value || noMore.value);
+      const load = () => {
+        loading.value = true;
+        setTimeout(() => {
+          count.value += 2;
+          loading.value = false;
+        }, 2000);
+      };
+      return {
+        count,
+        loading,
+        noMore,
+        disabled,
+        load,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/es/infiniteScroll.md b/website/docs/es/infiniteScroll.md
index 8b121c8fc4..08323d58e1 100644
--- a/website/docs/es/infiniteScroll.md
+++ b/website/docs/es/infiniteScroll.md
@@ -27,6 +27,26 @@ Añada `v-infinite-scroll` a la lista para ejecutar automáticamente el método
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const count = ref(0);
+      const load = () => {
+        count.value += 2;
+      };
+      return {
+        count,
+        load,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -74,6 +94,36 @@ Añada `v-infinite-scroll` a la lista para ejecutar automáticamente el método
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref, computed } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const count = ref(10);
+      const loading = ref(false);
+      const noMore = computed(() => count.value >= 20);
+      const disabled = computed(() => loading.value || noMore.value);
+      const load = () => {
+        loading.value = true;
+        setTimeout(() => {
+          count.value += 2;
+          loading.value = false;
+        }, 2000);
+      };
+      return {
+        count,
+        loading,
+        noMore,
+        disabled,
+        load,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/fr-FR/infiniteScroll.md b/website/docs/fr-FR/infiniteScroll.md
index 022be00be2..68263368d8 100644
--- a/website/docs/fr-FR/infiniteScroll.md
+++ b/website/docs/fr-FR/infiniteScroll.md
@@ -26,6 +26,26 @@ Ajoutez `v-infinite-scroll` à la liste pour exécuter automatiquement la métho
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const count = ref(0);
+      const load = () => {
+        count.value += 2;
+      };
+      return {
+        count,
+        load,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -73,6 +93,36 @@ Ajoutez `v-infinite-scroll` à la liste pour exécuter automatiquement la métho
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref, computed } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const count = ref(10);
+      const loading = ref(false);
+      const noMore = computed(() => count.value >= 20);
+      const disabled = computed(() => loading.value || noMore.value);
+      const load = () => {
+        loading.value = true;
+        setTimeout(() => {
+          count.value += 2;
+          loading.value = false;
+        }, 2000);
+      };
+      return {
+        count,
+        loading,
+        noMore,
+        disabled,
+        load,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/jp/infiniteScroll.md b/website/docs/jp/infiniteScroll.md
index dd32475832..c33edf5b78 100644
--- a/website/docs/jp/infiniteScroll.md
+++ b/website/docs/jp/infiniteScroll.md
@@ -26,6 +26,26 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const count = ref(0);
+      const load = () => {
+        count.value += 2;
+      };
+      return {
+        count,
+        load,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -73,6 +93,36 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref, computed } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const count = ref(10);
+      const loading = ref(false);
+      const noMore = computed(() => count.value >= 20);
+      const disabled = computed(() => loading.value || noMore.value);
+      const load = () => {
+        loading.value = true;
+        setTimeout(() => {
+          count.value += 2;
+          loading.value = false;
+        }, 2000);
+      };
+      return {
+        count,
+        loading,
+        noMore,
+        disabled,
+        load,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/zh-CN/infiniteScroll.md b/website/docs/zh-CN/infiniteScroll.md
index 6d76ba2bc8..e021852adf 100644
--- a/website/docs/zh-CN/infiniteScroll.md
+++ b/website/docs/zh-CN/infiniteScroll.md
@@ -26,6 +26,26 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const count = ref(0);
+      const load = () => {
+        count.value += 2;
+      };
+      return {
+        count,
+        load,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -73,6 +93,36 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref, computed } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const count = ref(10);
+      const loading = ref(false);
+      const noMore = computed(() => count.value >= 20);
+      const disabled = computed(() => loading.value || noMore.value);
+      const load = () => {
+        loading.value = true;
+        setTimeout(() => {
+          count.value += 2;
+          loading.value = false;
+        }, 2000);
+      };
+      return {
+        count,
+        loading,
+        noMore,
+        disabled,
+        load,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::